From e51bf3383b15f5b14a09f97cc7b285bbfdbabb0a Mon Sep 17 00:00:00 2001 From: ImAlpha Date: Sat, 7 Oct 2023 00:31:33 -0700 Subject: [PATCH] fixed files and set up new folders for components --- Websites/Jefes/Frontend/jefes/src/App.css | 191 +++++++++++++++--- Websites/Jefes/Frontend/jefes/src/App.tsx | 42 ++-- .../src/components/Footer/FooterOverlay.css | 0 .../Footer/{Footer.tsx => FooterOverlay.tsx} | 0 .../src/components/Footer/Newsletter.css | 0 .../src/components/Footer/Newsletter.tsx | 0 .../jefes/src/components/Header/Header.css | 53 ----- .../jefes/src/components/Header/Header.tsx | 22 -- .../jefes/src/components/Hero/Hero.css | 68 ------- .../jefes/src/components/Hero/Hero.tsx | 38 ---- .../src/components/MenuItem/MenuItem.tsx | 0 .../src/components/MenuItem/Menuitem.css | 0 .../jefes/src/components/Navbar/NavBar.tsx | 9 + .../jefes/src/components/Navbar/Navbar.css | 0 .../src/components/SubHeading/SubHeading.tsx | 0 .../Frontend/jefes/src/components/index.js | 13 ++ .../Frontend/jefes/src/constants/data.js | 0 .../Frontend/jefes/src/constants/images.js | 0 .../Frontend/jefes/src/constants/index.js | 5 + .../jefes/src/container/AboutUs/AboutUs.css | 0 .../jefes/src/container/AboutUs/AboutUs.js | 9 + .../jefes/src/container/Chef/Chef.css | 0 .../Frontend/jefes/src/container/Chef/Chef.js | 9 + .../jefes/src/container/FindUs/FindUs.css | 0 .../jefes/src/container/FindUs/FindUs.js | 9 + .../jefes/src/container/Footer/Footer.css | 0 .../jefes/src/container/Footer/Footer.js | 9 + .../jefes/src/container/Gallery/Gallery.css | 0 .../jefes/src/container/Gallery/Gallery.js | 9 + .../jefes/src/container/Header/Header.css | 0 .../jefes/src/container/Header/Header.js | 9 + .../jefes/src/container/Intro/Intro.css | 0 .../jefes/src/container/Intro/Intro.js | 9 + .../jefes/src/container/Laurels/Laruels.js | 9 + .../jefes/src/container/Laurels/Laurels.css | 0 .../jefes/src/container/Menu/Menu.css | 0 .../jefes/src/container/Menu/Menu.tsx | 9 + .../Frontend/jefes/src/container/index.js | 21 ++ 38 files changed, 306 insertions(+), 237 deletions(-) create mode 100644 Websites/Jefes/Frontend/jefes/src/components/Footer/FooterOverlay.css rename Websites/Jefes/Frontend/jefes/src/components/Footer/{Footer.tsx => FooterOverlay.tsx} (100%) create mode 100644 Websites/Jefes/Frontend/jefes/src/components/Footer/Newsletter.css create mode 100644 Websites/Jefes/Frontend/jefes/src/components/Footer/Newsletter.tsx delete mode 100644 Websites/Jefes/Frontend/jefes/src/components/Header/Header.css delete mode 100644 Websites/Jefes/Frontend/jefes/src/components/Header/Header.tsx delete mode 100644 Websites/Jefes/Frontend/jefes/src/components/Hero/Hero.css delete mode 100644 Websites/Jefes/Frontend/jefes/src/components/Hero/Hero.tsx create mode 100644 Websites/Jefes/Frontend/jefes/src/components/MenuItem/MenuItem.tsx create mode 100644 Websites/Jefes/Frontend/jefes/src/components/MenuItem/Menuitem.css create mode 100644 Websites/Jefes/Frontend/jefes/src/components/Navbar/NavBar.tsx create mode 100644 Websites/Jefes/Frontend/jefes/src/components/Navbar/Navbar.css create mode 100644 Websites/Jefes/Frontend/jefes/src/components/SubHeading/SubHeading.tsx create mode 100644 Websites/Jefes/Frontend/jefes/src/components/index.js create mode 100644 Websites/Jefes/Frontend/jefes/src/constants/data.js create mode 100644 Websites/Jefes/Frontend/jefes/src/constants/images.js create mode 100644 Websites/Jefes/Frontend/jefes/src/constants/index.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/AboutUs/AboutUs.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/AboutUs/AboutUs.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Chef/Chef.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Chef/Chef.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/FindUs/FindUs.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/FindUs/FindUs.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Footer/Footer.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Footer/Footer.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Gallery/Gallery.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Gallery/Gallery.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Header/Header.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Header/Header.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Intro/Intro.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Intro/Intro.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Laurels/Laruels.js create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Laurels/Laurels.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Menu/Menu.css create mode 100644 Websites/Jefes/Frontend/jefes/src/container/Menu/Menu.tsx create mode 100644 Websites/Jefes/Frontend/jefes/src/container/index.js diff --git a/Websites/Jefes/Frontend/jefes/src/App.css b/Websites/Jefes/Frontend/jefes/src/App.css index b9d355d..637a8eb 100644 --- a/Websites/Jefes/Frontend/jefes/src/App.css +++ b/Websites/Jefes/Frontend/jefes/src/App.css @@ -1,42 +1,177 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; +.section__padding { + padding: 4rem 6rem; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); +.flex__center { + display: flex; + justify-content: center; + align-items: center; } -@keyframes logo-spin { - from { - transform: rotate(0deg); +.app__bg { + background: url('./assets/bg.png'); + background-position: center; + background-size: cover; + background-repeat: repeat; + background-attachment: fixed; +} + +.app__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + + min-height: 100vh; +} + +.app__wrapper_info { + flex: 1; + width: 100%; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; +} + +.app__wrapper_img { + flex: 1; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + margin-left: 2rem; +} + +.app__wrapper_img-reverse { + justify-content: flex-start; + margin-right: 2rem; +} + +.app__wrapper_img img { + width: 80%; +} + +.custom__button { + background-color: var(--color-crimson); + color: var(--color-black); + font-family: var(--font-base); + font-weight: 700; + letter-spacing: 0.04em; + line-height: 28px; + font-size: 16px; + padding: 0.5rem 1.5rem; + border-radius: 1px; + border: none; + outline: none; + cursor: pointer; +} + +.p__cormorant { + font-family: var(--font-base); + color: var(--color-white); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: capitalize; + font-feature-settings: 'tnum' on, 'lnum' on; + line-height: 29.9px; + font-size: 23px; +} + +.p__opensans { + font-family: var(--font-alt); + color: var(--color-white); + font-weight: 400; + letter-spacing: 0.04em; + text-transform: capitalize; + line-height: 28px; + font-size: 16px; +} + +.headtext__cormorant { + font-family: var(--font-base); + color: var(--color-golden); + font-size: 64px; + line-height: 83.2px; + letter-spacing: 0.04em; + text-transform: capitalize; +} + +.spoon__img { + width: 45px; +} + +@media screen and (min-width: 2000px) { + .custom__button, + .p__cormorant { + font-size: 37px; + line-height: 67px; } - to { - transform: rotate(360deg); + + .p__opensans { + font-size: 30px; + line-height: 50px; + } + + .headtext__cormorant { + font-size: 150px; + line-height: 210px; + } + + .spoon__img { + width: 80px; } } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; +@media screen and (max-width: 1150px) { + .app__wrapper { + flex-direction: column; + } + + .app__wrapper_img { + margin: 5rem 0 0 0; + } + + .app__wrapper_img-reverse { + margin: 0 0 5rem 0; + } + + .app__wrapper_img img { + width: 100%; } } -.card { - padding: 2em; +@media screen and (max-width: 850px) { + .section__padding { + padding: 4rem; + } } -.read-the-docs { - color: #888; +@media screen and (max-width: 650px) { + .section__padding { + padding: 4rem 2rem; + } + + .p__cormorant { + font-size: 21px; + } + + .p__opensans { + font-size: 14px; + } } + +@media screen and (max-width: 450px) { + .p__opensans { + font-size: 12px; + } + + .p__cormorant { + font-size: 19px; + } + + .headtext__cormorant { + font-size: 45px; + line-height: 70px; + } +} \ No newline at end of file diff --git a/Websites/Jefes/Frontend/jefes/src/App.tsx b/Websites/Jefes/Frontend/jefes/src/App.tsx index 6152987..3b34be3 100644 --- a/Websites/Jefes/Frontend/jefes/src/App.tsx +++ b/Websites/Jefes/Frontend/jefes/src/App.tsx @@ -1,40 +1,26 @@ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' -// import './App.css' -import Header from './components/Header/Header' -import Hero from './components/Hero/Hero' +import { AboutUs, Chef, FindUs, Footer, Gallery, Header, Intro, Laurels, SpecialMenu } from './container'; +import { Navbar } from './components'; +import './App.css'; function App() { // const [count, setCount] = useState(0) return ( - // <>
-
- -
- // {/*
- // - // Vite logo - // - // - // React logo - // - //
*/} - // {/*

Vite + React

*/} - // {/*
- // - //

- // Edit src/App.tsx and save to test HMR - //

- //
- //

- // Click on the Vite and React logos to learn more - //

*/} - // + +
+ + + + + + + +