Merge pull request 'Started with new things for personalization' (#10) from frontend/farbenetc into main

Reviewed-on: #10
This commit is contained in:
cami 2021-05-27 02:22:37 +00:00
commit 166f642b53
9 changed files with 50 additions and 74 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -0,0 +1,11 @@
import React from 'react'
function AuthorDate() {
return (
<div>
</div>
)
}
export default AuthorDate

View file

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

View file

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

View file

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

View file

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