First Commit

src/App.css

@@ -0,0 +1,12 @@
+.App {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}

src/App.js

@@ -0,0 +1,27 @@
+import "./App.css";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+import Home from "./pages/Home";
+import Shop from "./pages/Shop";
+import About from "./pages/About";
+import Contact from "./pages/Contact";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <div className="App">
+      <Router>
+        <Navbar />
+        <Routes>
+          <Route path="/" exact element={<Home />} />
+          <Route path="/shop" exact element={<Shop />} />
+          <Route path="/about" exact element={<About />} />
+          <Route path="/contact" exact element={<Contact />} />
+        </Routes>
+        <Footer />
+      </Router>
+    </div>
+  );
+}
+
+export default App;

src/components/Footer.js

@@ -0,0 +1,22 @@
+import React from "react";
+import InstagramIcon from '@mui/icons-material/Instagram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import "../styles/Footer.css";
+
+function Footer() {
+  return (
+    <div className="footer">
+      <div className="socialMedia">
+        <a href="https://www.instagram.com/"><InstagramIcon /> </a> 
+        <a href="https://twitter.com/home"><TwitterIcon /> </a> 
+        <a href="https://www.facebook.com/"><FacebookIcon /> </a> 
+        <a href="https://www.linkedin.com/"><LinkedInIcon /> </a>
+      </div>
+      <p> &copy; 2023 chadstestsite.com</p>
+    </div>
+  );
+}
+
+export default Footer;

src/components/Navbar.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import Logo from '../assets/images.png';
+import { Link } from 'react-router-dom';
+import ReorderIcon from '@mui/icons-material/Reorder';
+import '../styles/Navbar.css'
+
+function Navbar() {
+
+  const [openLinks, setOpenLinks] = useState(false);
+
+  const toggleNavbar = () => {
+    setOpenLinks(!openLinks);
+  };
+  return (
+      <div className='navbar'>
+        <div className='leftSide' id={openLinks ? "open" : "close"}>
+            <img src={Logo} />
+            <div className='hiddenLinks'>
+            <Link to="/"> Home </Link>
+            <Link to="/menu"> Shop </Link>
+            <Link to="/about"> About </Link>
+            <Link to="/contact"> Contact </Link>
+            </div>
+        </div>
+        <div className='rightSide'>
+          <Link to="/"> Home </Link>
+          <Link to="/menu"> Shop </Link>
+          <Link to="/about"> About </Link>
+          <Link to="/contact"> Contact </Link>
+          <button onClick={toggleNavbar}>
+            <ReorderIcon />
+          </button>
+        </div>
+      </div>
+  )
+}
+
+export default Navbar

src/components/ShopItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function ShopItem({ image, name, price }) {
+  return (
+    <div className="shopItem">
+      <div style={{ backgroundImage: `url(${image})` }}> </div>
+      <h1> {name} </h1>
+      <p> ${price} </p>
+    </div>
+  );
+}
+
+export default ShopItem;

src/helpers/ShopList.js

@@ -0,0 +1,21 @@
+import ToykoGhoul from "../assets/Tokyo-Ghoul-Wallpaper-For-PC.jpg";
+import Image2 from "../assets/1132051.jpg";
+import Image3 from "../assets/1132065.jpg";
+
+export const ShopList = [
+    {
+        name: "Tokyo Ghoul",
+        image: ToykoGhoul,
+        price: 1
+    },
+    {
+        name: "Image 2",
+        image: Image2,
+        price: 1,
+    },
+    {
+        name: "Image 3",
+        image: Image3,
+        price: 1,
+    },
+];

src/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/pages/About.js

@@ -0,0 +1,23 @@
+import React from "react";
+import MultiplePizzas from "../assets/shityourself.jpg";
+import "../styles/About.css";
+function About() {
+  return (
+    <div className="about">
+      <div
+        className="aboutTop"
+        style={{ backgroundImage: `url(${MultiplePizzas})` }}
+      ></div>
+      <div className="aboutBottom">
+        <h1> ABOUT US</h1>
+        <p>
+          Hello, My name is Chad and I'm currently working towards my goals on trying to become a developer. 
+          I been working hard and trying to learn quickly. 
+          I try to be patient but I really wanna just learn fast.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default About;

src/pages/Contact.js

@@ -0,0 +1,34 @@
+import React from "react";
+import TrainLeft from "../assets/1132066.jpg";
+import "../styles/Contact.css";
+
+function Contact() {
+  return (
+    <div className="contact">
+      <div
+        className="leftSide"
+        style={{ backgroundImage: `url(${TrainLeft})` }}
+      ></div>
+      <div className="rightSide">
+        <h1> Contact Us</h1>
+
+        <form id="contact-form" method="POST">
+          <label htmlFor="name">Full Name</label>
+          <input name="name" placeholder="Enter full name..." type="text" />
+          <label htmlFor="email">Email</label>
+          <input name="email" placeholder="Enter email..." type="email" />
+          <label htmlFor="message">Message</label>
+          <textarea
+            rows="6"
+            placeholder="Enter message..."
+            name="message"
+            required
+          ></textarea>
+          <button type="submit"> Send Message</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Contact;

src/pages/Home.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import BannerImage from "../assets/Tokyo-Ghoul-Backgrounds.jpg";
+import "../styles/Home.css";
+
+function Home() {
+  return (
+    <div className="home" style={{ backgroundImage: `url(${BannerImage})` }}>
+      <div className="headerContainer">
+        <h1> Chad's Test Website </h1>
+        <p> This is kinda fun</p>
+        <Link to='menu'>
+          <button> This is a button </button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default Home;

src/pages/Shop.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { ShopList } from "../helpers/ShopList";
+import ShopItem from "../components/ShopItem";
+import "../styles/Shop.css";
+
+function Shop() {
+  return (
+    <div className="shop">
+      <h1 className="shopTitle">My Menu</h1>
+      <div className="shopList">
+        {ShopList.map((shopItem, key) => {
+          return (
+            <ShopItem
+              key={key}
+              image={shopItem.image}
+              name={shopItem.name}
+              price={shopItem.price}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Shop;

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/styles/About.css

@@ -0,0 +1,37 @@
+.about {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .aboutTop {
+    width: 100%;
+    height: 45%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  }
+  
+  .aboutBottom {
+    display: flex;
+    flex-direction: column;
+    height: 55%;
+    align-items: center;
+    margin-top: 50px;
+  }
+  
+  .aboutBottom p {
+    width: 1200px;
+  }
+  
+  .about .aboutBottom h1 {
+    font-weight: 400;
+    font-size: 70px;
+    color: black;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    transform: translateY(-40px);
+  }

src/styles/Contact.css

@@ -0,0 +1,80 @@
+.contact {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+  }
+  
+  .contact .leftSide {
+    height: 100%;
+    flex: 50%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  
+  .contact .rightSide {
+    height: 100%;
+    flex: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .contact .rightSide h1 {
+    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+      "Lucida Sans", Arial, sans-serif;
+    font-weight: 10;
+    font-size: 50px;
+    margin-left: 30px;
+  }
+  
+  form {
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    height: auto;
+    padding: 30px;
+  }
+  
+  form input {
+    height: 40px;
+    width: 80%;
+    border: none;
+    border-bottom: 1px solid #121619;
+    color: black;
+  }
+  
+  form textarea {
+    margin-top: 15px;
+    height: 70px;
+    width: 80%;
+    border: none;
+    border-bottom: 1px solid #121619;
+    color: black;
+  }
+  input::placeholder,
+  textarea::placeholder {
+    font-weight: bold;
+    color: black;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  form input:focus,
+  textarea:focus {
+    outline: none;
+  }
+  
+  form label {
+    margin-top: 15px;
+    color: grey;
+  }
+  
+  form button {
+    margin-top: 40px;
+    width: 140px;
+    height: 40px;
+    border: none;
+    background-color: #121619;
+    color: whitesmoke;
+    font-size: 15px;
+    cursor: pointer;
+  }

src/styles/Footer.css

@@ -0,0 +1,21 @@
+.footer {
+  width: 100%;
+  height: 200px;
+  background-color: #121619;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 10px;
+}
+
+.socialMedia svg {
+  color: white;
+  margin: 20px;
+  font-size: 70px;
+  cursor: pointer;
+}
+
+.footer p {
+  color: white;
+}

src/styles/Home.css

@@ -0,0 +1,98 @@
+.home {
+  width: 100%;
+  height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: left;
+  flex-direction: column;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+.headerContainer {
+  width: auto;
+  margin-left: 50px;
+}
+
+.headerContainer h1 {
+  justify-content: center;
+  align-items: center;
+  font-size: 90px;
+  height: 60px;
+  font-weight: 50;
+  color: black;
+}
+
+.headerContainer p {
+  padding: 0;
+  font-size: 40px;
+  font-weight: lighter;
+  color: black;
+}
+
+.headerContainer button {
+  color: black;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  justify-content: center;
+  background-color: #121619;
+  height: 50px;
+  width: 180px;
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+}
+
+.headerContainer button:hover {
+  background-color: #07090a;
+  cursor: pointer;
+  transition: 0.3s ease-in;
+}
+
+@media only screen and (max-width: 650px) {
+  .home {
+    justify-content: center;
+    align-items: center;
+  }
+  .headerContainer h1,
+  .headerContainer p {
+  }
+
+  .headerContainer {
+    margin-left: 0px;
+    border-radius: 10px;
+    padding: 10px;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: #121619;
+    color: white;
+  }
+
+  .headerContainer h1 {
+    font-size: 40px;
+    height: 30px;
+    color: white;
+  }
+
+  .headerContainer p {
+    font-size: 30px;
+    color: white;
+  }
+
+  .headerContainer button {
+    background-color: white;
+    color: #121619;
+    margin-bottom: 30px;
+  }
+
+  .headerContainer button:hover {
+    background-color: rgb(225, 225, 225);
+    color: #121619;
+  }
+}

src/styles/Navbar.css

@@ -0,0 +1,102 @@
+.navbar {
+    width: 100%;
+    height: 100px;
+    background-color: #121619;
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .navbar .leftSide {
+    flex: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 150px;
+  }
+  
+  .navbar .leftSide img {
+    width: 70px;
+  }
+  
+  .navbar .rightSide {
+    flex: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .navbar a {
+    color: white;
+    text-decoration: none;
+    margin: 20px;
+  }
+  
+  .navbar .rightSide button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+  }
+  
+  .navbar .rightSide svg {
+    font-size: 40px;
+  }
+  
+  .navbar #open {
+    padding-left: 0px;
+  }
+  .navbar #open img {
+    display: none;
+  }
+  
+  .navbar #close img {
+    display: inherit;
+  }
+  
+  .navbar #open .hiddenLinks {
+    display: inherit;
+    margin-left: 30px;
+  }
+  
+  .navbar #close .hiddenLinks {
+    display: none;
+  }
+  
+  .navbar #open a {
+    width: 70px;
+    margin: 5px;
+  }
+  @media only screen and (max-width: 900px) {
+    .navbar .rightSide a {
+      width: 70px;
+    }
+    .navbar .leftSide {
+      padding-left: 50px;
+    }
+  }
+  
+  @media only screen and (max-width: 600px) {
+    .navbar .rightSide a {
+      display: none;
+    }
+  
+    .navbar .rightSide {
+      justify-content: flex-end;
+      padding-right: 50px;
+    }
+  
+    .navbar .rightSide button {
+      display: inherit;
+    }
+  }
+  
+  @media only screen and (min-width: 600px) {
+    .navbar .rightSide button {
+      display: none;
+    }
+  
+    .hiddenLinks {
+      display: none;
+    }
+  }

src/styles/Shop.css

@@ -0,0 +1,63 @@
+.shop {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .shop .shopTitle {
+    font-family: cursive;
+    font-size: 60px;
+  }
+  
+  .shopList {
+    width: 70vw;
+    height: auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    place-items: center;
+  }
+
+  /* SHOP ITEM STYLING */
+  
+  .shopItem {
+    border-radius: 15px;
+    width: 300px;
+    height: 350px;
+    margin: 20px;
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+  .shopItem:hover {
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
+    transition: 0.3s ease-in;
+    cursor: pointer;
+  }
+  
+  .shopItem div {
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    width: 100%;
+    height: 200px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  
+  .shopItem h1,
+  .shopItem p {
+    margin-left: 20px;
+  }
+  
+  @media only screen and (max-width: 1300px) {
+    .shopList {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  
+  @media only screen and (max-width: 800px) {
+    .shopList {
+      grid-template-columns: 1fr;
+    }
+  }