fifth commit

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "thecoddepot",
+  "name": "chadstestsite",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "thecoddepot",
+      "name": "chadstestsite",
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "^11.10.8",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "thecoddepot",
+  "name": "chadstestsite",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/components/Footer.js

@@ -14,7 +14,7 @@ function Footer() {
         <a href="https://www.facebook.com/"><FacebookIcon /> </a> 
         <a href="https://www.linkedin.com/"><LinkedInIcon /> </a>
       </div>
-      <p> &copy; 2023 chadstestsite.com</p>
+      <p> &copy; 2023 ehchadservices.com</p>
     </div>
   );
 }

src/pages/Home.js

@@ -10,9 +10,12 @@ function Home() {
         <h1> Chad's Test Website </h1>
         <p> This is kinda fun</p>
         <Link to='shop'>
-          <button> This is a button </button>
+          <button> Visit Our Shop </button>
         </Link>
-      </div>
+        </div>
+        <div className="discordint">
+        <iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+        </div>
     </div>
   );
 }

src/styles/About.css

@@ -1,13 +1,13 @@
 .about {
     width: 100%;
-    height: 90vh;
+    height: 90svh;
     display: flex;
     flex-direction: column;
   }
   
   .aboutTop {
-    width: 100%;
+    width: 100svw;
-    height: 45%;
+    height: 35%;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -23,7 +23,9 @@
   }
   
   .aboutBottom p {
-    width: 1200px;
+    width: 90svw;
+    display: flex;
+    justify-content: center;
   }
   
   .about .aboutBottom h1 {

src/styles/Footer.css

@@ -1,6 +1,6 @@
 .footer {
-  width: 100%;
+  width: 100svw;
-  height: 200px;
+  height: 160px;
   background-color: #121619;
   display: flex;
   justify-content: center;

src/styles/Home.css

@@ -1,5 +1,5 @@
 .home {
-  width: 100%;
+  width: 100svw;
   height: 90vh;
   display: flex;
   justify-content: center;
@@ -52,14 +52,22 @@
   transition: 0.3s ease-in;
 }
 
-@media only screen and (max-width: 650px) {
+.discordint iframe {
+  display: flex;
+  justify-content: center;
+  width: 400px;
+  height: 50svh;
+}
+
+@media only screen and (max-width: 765px) {
   .home {
     justify-content: center;
     align-items: center;
   }
-  .headerContainer h1,
+  .headerContainer h1, 
   .headerContainer p {
-  }
+    display: flex;
+  } 
 
   .headerContainer {
     margin-left: 0px;
@@ -95,4 +103,10 @@
     background-color: rgb(225, 225, 225);
     color: #121619;
   }
+
+  .discordint iframe {
+    margin-left: 10svw;
+    width: 60svw;
+    height: 350px;
+  }
 }

src/styles/Navbar.css

@@ -1,5 +1,5 @@
 .navbar {
-    width: 100%;
+    width: 100svw;
     height: 100px;
     background-color: #121619;
     display: flex;
@@ -69,7 +69,7 @@
   }
   @media only screen and (max-width: 900px) {
     .navbar .rightSide a {
-      width: 70px;
+      width: 65px;
     }
     .navbar .leftSide {
       padding-left: 50px;
@@ -91,7 +91,7 @@
     }
   }
   
-  @media only screen and (min-width: 600px) {
+  @media only screen and (min-width: 601px) {
     .navbar .rightSide button {
       display: none;
     }
@@ -99,4 +99,8 @@
     .hiddenLinks {
       display: none;
     }
+    
+    .navbar .leftSide a {
+      display: none;
+    }
   }