123

src/App.js

@@ -8,6 +8,7 @@ import Shop from "./pages/Shop";
 import Socials from "./pages/Socials";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
+import Applications from "./pages/Applications";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
@@ -25,7 +26,9 @@ function App() {
          
           <Route path="/" exact element={<Home />} />
           
-          <Route path="/shop" exact element={<Shop />} />
+          {/* <Route path="/shop" exact element={<Shop />} /> */}
+
+          <Route path="/applications" exact element={<Applications />} />
 
           <Route path="/socials" exact element={<Socials />} />
           

src/components/Footer.js

@@ -2,15 +2,17 @@ import React from "react";
 import InstagramIcon from '@mui/icons-material/Instagram';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import GitHubIcon from "@mui/icons-material/GitHub";
 import "../styles/Footer.css";
 
 function Footer() {
   return (
     <div className="footer">
       <div className="socialMedia">
-        <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank" rel="noreferrer"><YouTubeIcon /> </a>
+        <a href='https://github.com/DevEhChad' target="_blank" rel="noreferrer"><GitHubIcon /> </a>
         <a href="https://twitter.com/EhChad_real" target="_blank" rel="noreferrer"><TwitterIcon /> </a>
         <a href='https://www.instagram.com/chad.doty/' target="_blank" rel="noreferrer"><InstagramIcon /> </a>  
+        <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank" rel="noreferrer"><YouTubeIcon /> </a>
       </div>
       <p> &copy; 2024 ehchadservices.com</p>
     </div>

src/components/Navbar.js

@@ -17,6 +17,7 @@ function Navbar() {
             <img src={Logo} />
             <div className='hiddenLinks'>        
             <NavLink to="/"> Home </NavLink>
+            <NavLink to="/applications"> Apps </NavLink>
             <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
            {/* <NavLink to="/contact"> Contact </NavLink> */}
@@ -24,6 +25,7 @@ function Navbar() {
         </div>
         <div className='rightSide'>
             <NavLink to="/"> Home </NavLink>
+            <NavLink to="/applications"> Apps </NavLink>
             <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
            {/* <NavLink to="/contact"> Contact </NavLink> */}

src/pages/Applications.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Applications.css";
+import ECMM from "../assets/ECMMweb.png";
+
+function Applications() {
+    return (
+      <div className="application">
+
+        <div className="ECMMContainer">
+            <div className="title">
+                <h1>EhChads Mod Manager</h1>
+            </div>
+            <img className="ECMMweb" src={ECMM} />
+        
+        </div>
+      </div>
+    );
+  }
+  
+  export default Applications;

src/styles/Applications.css

@@ -0,0 +1,27 @@
+.application {
+    width: 100svw;
+    height: 100svh;
+    background-color: gray;
+}
+
+.ECMMContainer {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 20%;
+    background-color: blue;
+}
+
+.title {
+    justify-content: center;
+    display: flex;
+    color: white;
+    font-family: sans-serif, Arial;
+    font-weight: bold;
+}
+
+.ECMMweb {
+    width: 70%;
+    
+    justify-content: center;
+}

src/styles/Socials.css

@@ -1,4 +1,5 @@
 .social {
+    background-color: gray;
     width: 100%;
     height: auto;
     display: flex;
@@ -23,6 +24,7 @@
   /* social ITEM STYLING */
   
   .socialItem {
+    background-color: lightgray;
     border-radius: 15px;
     width: 300px;
     height: 350px;