mirror of
https://github.com/DevEhChad/chadsreactproject.git
synced 2025-11-08 13:31:35 +00:00
Add files via upload
Third Commit
This commit is contained in:
Dev EhChad
GitHub
52
src/App.js
52
src/App.js
@@ -1,27 +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>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -1,22 +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> © 2023 chadstestsite.com</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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> © 2023 chadstestsite.com</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -1,38 +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
|
||||
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="/shop"> Shop </Link>
|
||||
<Link to="/about"> About </Link>
|
||||
<Link to="/contact"> Contact </Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='rightSide'>
|
||||
<Link to="/"> Home </Link>
|
||||
<Link to="/shop"> Shop </Link>
|
||||
<Link to="/about"> About </Link>
|
||||
<Link to="/contact"> Contact </Link>
|
||||
<button onClick={toggleNavbar}>
|
||||
<ReorderIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
||||
@@ -1,13 +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>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -1,21 +1,27 @@
|
||||
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,
|
||||
},
|
||||
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,
|
||||
},
|
||||
|
||||
{
|
||||
name: "Tokyo Ghoul2",
|
||||
image: ToykoGhoul,
|
||||
price: 1,
|
||||
}
|
||||
];
|
||||
@@ -1,23 +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>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -1,34 +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>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -1,20 +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;
|
||||
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='shop'>
|
||||
<button> This is a button </button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
@@ -1,26 +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>
|
||||
);
|
||||
}
|
||||
|
||||
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">Test Shop</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;
|
||||
@@ -1,37 +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);
|
||||
.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);
|
||||
}
|
||||
@@ -1,80 +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;
|
||||
.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;
|
||||
}
|
||||
@@ -1,21 +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;
|
||||
.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;
|
||||
}
|
||||
@@ -1,98 +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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,63 +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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user