mirror of
https://github.com/DevEhChad/chadsreactproject.git
synced 2025-11-08 13:31:35 +00:00
Merge branch 'main' of https://github.com/DevEhChad/chadsreactproject
This commit is contained in:
52
src/App.js
52
src/App.js
@@ -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;
|
||||||
@@ -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> © 2023 chadstestsite.com</p>
|
<p> © 2023 chadstestsite.com</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -18,3 +18,23 @@ function Home() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default Home;
|
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,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);
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user