cami/Bachelorthesis_Code
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Wiki Activity

Started with new things for personalization #10

Merged
cami merged 1 commit from frontend/farbenetc into main 2021-05-27 02:22:38 +00:00
Conversation 0 Commits 1 Files changed 9 +50 -74
9 changed files with 50 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/App.css
View file

@ -6,7 +6,7 @@
}
.home,
.services,
.about,
.products,
.sign-up {
display: flex;
@ -16,12 +16,10 @@
font-size: 3rem;
}
.services {
background-image: url('images/img-9.jpg');
.about {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-size: 100px;
}

4
frontend/src/App.js
View file

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

2
frontend/src/Footer.css
View file

@ -1,5 +1,5 @@
.footer-container {
background-color: #242424;
background-color: #6C7A89;
padding: 4rem 0 2rem 0;
display: flex;
flex-direction: column;

54
frontend/src/Footer.js
View file

@ -7,60 +7,24 @@ import "@fortawesome/fontawesome-free/css/all.css";
function Footer() {
return (
<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-link-wrapper">
<div className="footer-link-items">
<h2>About Us</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>
<h2>Informationen</h2>
<Link to="/">Hintergrund</Link>
<Link to="/">Ziel dieser Webseite</Link>
</div>
<div className="footer-link-items">
<h2>Contact Us</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>
<h2>Kontakt</h2>
<Link to="/">Matrix</Link>
<Link to="/">E-Mail</Link>
<Link to="/">Mastodon</Link>
</div>
</div>
<div className="footer-link-wrapper">
<div className="footer-link-items">
<h2>Videos</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 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>
<h2>Rechtliches</h2>
<Link to="/">Datenschutz</Link>
</div>
</div>
</div>

11
frontend/src/components/Author.js Normal file
View file

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

4
frontend/src/components/Button.css
View file

@ -12,7 +12,7 @@
.btn--primary {
background-color: var(--primary);
color: #242424;
color: #BDC3C7;
border: 1px solid var(--primary);
}
@ -38,6 +38,6 @@
.btn--medium:hover {
transition: all 0.3s ease-out;
background: #fff;
color: #242424;
color: #BDC3C7;
transition: 250ms;
}

8
frontend/src/components/Navbar.css
View file

@ -1,5 +1,5 @@
.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;
display: flex;
justify-content: center;
@ -93,7 +93,7 @@
}
.nav-menu.active {
background: #242222;
background: #abb7b7;
left: 0;
opacity: 1;
transition: all 0.5s ease;
@ -109,7 +109,7 @@
.nav-links:hover {
background-color: #fff;
color: #242424;
color: #000;
border-radius: 0;
}
@ -152,7 +152,7 @@
.nav-links-mobile:hover {
background: #fff;
color: #242424;
color: #6c7a89;
transition: 250ms;
}
}

31
frontend/src/components/Navbar.js
View file

@ -23,24 +23,27 @@ function Navbar() {
useEffect(() => {
showButton();
}, []);
window.addEventListener("resize", showButton);
return (
<>
{" "}
<nav className="navbar">
{" "}
<div className="navbar-container">
{" "}
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
TRVL
<i class="fab fa-typo3" />
</Link>
{" "}
Bachelorarbeit Marco Camenzind {" "}
</Link>{" "}
<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"}>
{" "}
<li className="nav-item">
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
Home
Startseite
</Link>
</li>
<li className="nav-item">
@ -49,28 +52,28 @@ function Navbar() {
className="nav-links"
onClick={closeMobileMenu}
>
Services
Über
</Link>
</li>
<li className="nav-item">
<li>
<Link
to="/products"
to="/sign-up"
className="nav-links"
onClick={closeMobileMenu}
>
Products
Anleitung
</Link>
</li>
<li>
<Link
to="/sign-up"
className="nav-links-mobile"
onClick={closeMobileMenu}
>
Sign Up
Anmelden
</Link>
</li>
</ul>
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
</div>

4
frontend/src/components/pages/Services.js → frontend/src/components/pages/Ueber.js
View file

@ -2,10 +2,10 @@ import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Services() {
export default function Ueber() {
return (
<>
<h1 className="services">SERVICES</h1>
<h2 className="about">Über das Projekt</h2>
<Footer />
</>
);