Merge pull request 'Started with new things for personalization' (#10) from frontend/farbenetc into main
Reviewed-on: #10
This commit is contained in:
commit
166f642b53
9 changed files with 50 additions and 74 deletions
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.home,
|
.home,
|
||||||
.services,
|
.about,
|
||||||
.products,
|
.products,
|
||||||
.sign-up {
|
.sign-up {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -16,12 +16,10 @@
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.services {
|
.about {
|
||||||
background-image: url('images/img-9.jpg');
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
color: #fff;
|
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,9 @@ 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 Services from "./components/pages/Services";
|
|
||||||
import Products from "./components/pages/Products";
|
import Products from "./components/pages/Products";
|
||||||
import SignUp from "./components/pages/SignUp";
|
import SignUp from "./components/pages/SignUp";
|
||||||
|
import Ueber from "./components/pages/Ueber";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
@ -14,7 +14,7 @@ function App() {
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/" exact component={Home} />
|
<Route path="/" exact component={Home} />
|
||||||
<Route path="/services" component={Services} />
|
<Route path="/services" component={Ueber} />
|
||||||
<Route path="/products" component={Products} />
|
<Route path="/products" component={Products} />
|
||||||
<Route path="/sign-up" component={SignUp} />
|
<Route path="/sign-up" component={SignUp} />
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.footer-container {
|
.footer-container {
|
||||||
background-color: #242424;
|
background-color: #6C7A89;
|
||||||
padding: 4rem 0 2rem 0;
|
padding: 4rem 0 2rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -7,60 +7,24 @@ import "@fortawesome/fontawesome-free/css/all.css";
|
||||||
function Footer() {
|
function Footer() {
|
||||||
return (
|
return (
|
||||||
<div className="footer-container">
|
<div className="footer-container">
|
||||||
<section className="footer-subscription">
|
|
||||||
<p className="footer-subscription-heading">
|
|
||||||
Join the Adventure newsletter to receive our best vacation deals
|
|
||||||
</p>
|
|
||||||
<p className="footer-subscription-text">
|
|
||||||
You can unsubscribe at any time.
|
|
||||||
</p>
|
|
||||||
<div className="input-areas">
|
|
||||||
<form>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
placeholder="mail@example.com"
|
|
||||||
className="footer-input"
|
|
||||||
/>
|
|
||||||
<Button buttonStyle="btn--outline">Subscribe</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div className="footer-links">
|
<div className="footer-links">
|
||||||
<div className="footer-link-wrapper">
|
<div className="footer-link-wrapper">
|
||||||
<div className="footer-link-items">
|
<div className="footer-link-items">
|
||||||
<h2>About Us</h2>
|
<h2>Informationen</h2>
|
||||||
<Link to="/sign-up">How it Works</Link>
|
<Link to="/">Hintergrund</Link>
|
||||||
<Link to="/">Testimonials</Link>
|
<Link to="/">Ziel dieser Webseite</Link>
|
||||||
<Link to="/">Careers</Link>
|
|
||||||
<Link to="/">Investors</Link>
|
|
||||||
<Link to="/">Terms of Service</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-link-items">
|
<div className="footer-link-items">
|
||||||
<h2>Contact Us</h2>
|
<h2>Kontakt</h2>
|
||||||
<Link to="/sign-up">How it Works</Link>
|
<Link to="/">Matrix</Link>
|
||||||
<Link to="/">Testimonials</Link>
|
<Link to="/">E-Mail</Link>
|
||||||
<Link to="/">Careers</Link>
|
<Link to="/">Mastodon</Link>
|
||||||
<Link to="/">Investors</Link>
|
|
||||||
<Link to="/">Terms of Service</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>Videos</h2>
|
<h2>Rechtliches</h2>
|
||||||
<Link to="/sign-up">How it Works</Link>
|
<Link to="/">Datenschutz</Link>
|
||||||
<Link to="/">Testimonials</Link>
|
|
||||||
<Link to="/">Careers</Link>
|
|
||||||
<Link to="/">Investors</Link>
|
|
||||||
<Link to="/">Terms of Service</Link>
|
|
||||||
</div>
|
|
||||||
<div className="footer-link-items">
|
|
||||||
<h2>Social Media</h2>
|
|
||||||
<Link to="/sign-up">How it Works</Link>
|
|
||||||
<Link to="/">Testimonials</Link>
|
|
||||||
<Link to="/">Careers</Link>
|
|
||||||
<Link to="/">Investors</Link>
|
|
||||||
<Link to="/">Terms of Service</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
11
frontend/src/components/Author.js
Normal file
11
frontend/src/components/Author.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
function AuthorDate() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthorDate
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
.btn--primary {
|
.btn--primary {
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
color: #242424;
|
color: #BDC3C7;
|
||||||
border: 1px solid var(--primary);
|
border: 1px solid var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,6 +38,6 @@
|
||||||
.btn--medium:hover {
|
.btn--medium:hover {
|
||||||
transition: all 0.3s ease-out;
|
transition: all 0.3s ease-out;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #242424;
|
color: #BDC3C7;
|
||||||
transition: 250ms;
|
transition: 250ms;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.navbar {
|
.navbar {
|
||||||
background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
|
background: linear-gradient(90deg, #6c7a89 0%, #6c7a89 100%);
|
||||||
height: 80px;
|
height: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu.active {
|
.nav-menu.active {
|
||||||
background: #242222;
|
background: #abb7b7;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
|
@ -109,7 +109,7 @@
|
||||||
|
|
||||||
.nav-links:hover {
|
.nav-links:hover {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #242424;
|
color: #000;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -152,7 +152,7 @@
|
||||||
|
|
||||||
.nav-links-mobile:hover {
|
.nav-links-mobile:hover {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #242424;
|
color: #6c7a89;
|
||||||
transition: 250ms;
|
transition: 250ms;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,24 +23,27 @@ function Navbar() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
showButton();
|
showButton();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
window.addEventListener("resize", showButton);
|
window.addEventListener("resize", showButton);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{" "}
|
||||||
<nav className="navbar">
|
<nav className="navbar">
|
||||||
|
{" "}
|
||||||
<div className="navbar-container">
|
<div className="navbar-container">
|
||||||
|
{" "}
|
||||||
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
|
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
|
||||||
TRVL
|
{" "}
|
||||||
<i class="fab fa-typo3" />
|
Bachelorarbeit Marco Camenzind {" "}
|
||||||
</Link>
|
</Link>{" "}
|
||||||
<div className="menu-icon" onClick={handleClick}>
|
<div className="menu-icon" onClick={handleClick}>
|
||||||
<i className={click ? "fas fa-times" : "fas fa-bars"} />
|
{" "}
|
||||||
</div>
|
<i className={click ? "fas fa-times" : "fas fa-bars"} />{" "}
|
||||||
|
</div>{" "}
|
||||||
<ul className={click ? "nav-menu active" : "nav-menu"}>
|
<ul className={click ? "nav-menu active" : "nav-menu"}>
|
||||||
|
{" "}
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
|
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
|
||||||
Home
|
Startseite
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
|
@ -49,28 +52,28 @@ function Navbar() {
|
||||||
className="nav-links"
|
className="nav-links"
|
||||||
onClick={closeMobileMenu}
|
onClick={closeMobileMenu}
|
||||||
>
|
>
|
||||||
Services
|
Über
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to="/products"
|
to="/sign-up"
|
||||||
className="nav-links"
|
className="nav-links"
|
||||||
onClick={closeMobileMenu}
|
onClick={closeMobileMenu}
|
||||||
>
|
>
|
||||||
Products
|
Anleitung
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to="/sign-up"
|
to="/sign-up"
|
||||||
className="nav-links-mobile"
|
className="nav-links-mobile"
|
||||||
onClick={closeMobileMenu}
|
onClick={closeMobileMenu}
|
||||||
>
|
>
|
||||||
Sign Up
|
Anmelden
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
|
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,10 +2,10 @@ import React from "react";
|
||||||
import "../../App.css";
|
import "../../App.css";
|
||||||
import Footer from "../../Footer";
|
import Footer from "../../Footer";
|
||||||
|
|
||||||
export default function Services() {
|
export default function Ueber() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="services">SERVICES</h1>
|
<h2 className="about">Über das Projekt</h2>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
Loading…
Reference in a new issue