chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-08 13:31:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
Third  Commit
This commit is contained in:
Dev EhChad
2023-05-01 08:52:34 -04:00
committed by GitHub
parent 5f1a55f931
commit 1527b5c20a
20 changed files with 706 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
build/asset-manifest.json
View File

@@ -1,7 +1,7 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.57ed8be6.css", "main.css": "/static/css/main.57ed8be6.css",
"main.js": "/static/js/main.7cad1801.js", "main.js": "/static/js/main.46d3a67e.js",
"static/js/787.6d38311e.chunk.js": "/static/js/787.6d38311e.chunk.js", "static/js/787.6d38311e.chunk.js": "/static/js/787.6d38311e.chunk.js",
"static/media/Tokyo-Ghoul-Wallpaper-For-PC.jpg": "/static/media/Tokyo-Ghoul-Wallpaper-For-PC.3a4eb3e1677a0231dbb6.jpg", "static/media/Tokyo-Ghoul-Wallpaper-For-PC.jpg": "/static/media/Tokyo-Ghoul-Wallpaper-For-PC.3a4eb3e1677a0231dbb6.jpg",
"static/media/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg", "static/media/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg",
@@ -11,11 +11,11 @@
"static/media/shityourself.jpg": "/static/media/shityourself.4d8b9defaa102373e6c7.jpg", "static/media/shityourself.jpg": "/static/media/shityourself.4d8b9defaa102373e6c7.jpg",
"index.html": "/index.html", "index.html": "/index.html",
"main.57ed8be6.css.map": "/static/css/main.57ed8be6.css.map", "main.57ed8be6.css.map": "/static/css/main.57ed8be6.css.map",
"main.7cad1801.js.map": "/static/js/main.7cad1801.js.map", "main.46d3a67e.js.map": "/static/js/main.46d3a67e.js.map",
"787.6d38311e.chunk.js.map": "/static/js/787.6d38311e.chunk.js.map" "787.6d38311e.chunk.js.map": "/static/js/787.6d38311e.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.57ed8be6.css", "static/css/main.57ed8be6.css",
"static/js/main.7cad1801.js" "static/js/main.46d3a67e.js"
] ]
} }

2
build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.7cad1801.js"></script><link href="/static/css/main.57ed8be6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.46d3a67e.js"></script><link href="/static/css/main.57ed8be6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

3
build/static/js/main.46d3a67e.js Normal file
View File

File diff suppressed because one or more lines are too long

80
build/static/js/main.46d3a67e.js.LICENSE.txt Normal file
View File

@@ -0,0 +1,80 @@
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @mui/styled-engine v5.12.0
*
* @license MIT
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @remix-run/router v1.6.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**
* React Router DOM v6.11.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
/**
* React Router v6.11.0
*
* Copyright (c) Remix Software Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/

1
build/static/js/main.46d3a67e.js.map Normal file
View File

File diff suppressed because one or more lines are too long

52
src/App.js
View File

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

42
src/components/Footer.js
View File

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

76
src/components/Navbar.js
View File

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

24
src/components/ShopItem.js
View File

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

46
src/helpers/ShopList.js
View File

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

44
src/pages/About.js
View File

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

66
src/pages/Contact.js
View File

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

40
src/pages/Home.js
View File

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

50
src/pages/Shop.js
View File

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

72
src/styles/About.css
View File

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

158
src/styles/Contact.css
View File

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

40
src/styles/Footer.css
View File

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

194
src/styles/Home.css
View File

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

202
src/styles/Navbar.css
View File

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

124
src/styles/Shop.css
View File

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