Merge pull request #49 from just-breathing/uiissues

footer issue fixed #48
OudomMunint · Mar 2, 2024 · 3962099 · 3962099
2 parents 5bd8ee8 + 6bfc5b6
commit 3962099
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 18 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,10 @@
 /* App partial view styles */
 .App {
+  width: 100vw;
   text-align: center;
   z-index: -1;
   position: relative;
+  overflow-x: hidden;
 }
 
 #root {

diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -21,8 +21,7 @@ function ContactForm() {
   };
 
   return (
-    <body>
-
+<>
       <form name="contact" netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true" hidden>
       <input type="text" name="name" />
       <input type="email" name="email" />
@@ -43,23 +42,23 @@ function ContactForm() {
           {/* Name */}
           <div className="input-container ic1">
             <label className="form-label" htmlFor="name"></label>
-            <input className="form-control" class="input" type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)}
+            <input className="form-control input" type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)}
               placeholder="Name"
               required />
           </div>
 
           {/* Email */}
           <div className="input-container ic2">
             <label className="form-label" htmlFor="email"></label>
-            <input className="form-control" class="input" type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}
+            <input className="form-control input"  type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}
               placeholder="Email"
               required/>
           </div>
 
           {/* Message */}
           <div className="input-container ic2">
             <label className="form-label" htmlFor="message"></label>
-            <textarea className="form-control" class="input from-textarea" id="message" name="message" value={message} onChange={(e) => setMessage(e.target.value)}
+            <textarea className="form-control input from-textarea"  id="message" name="message" value={message} onChange={(e) => setMessage(e.target.value)}
             placeholder="Message"
             required />
           </div>
@@ -71,7 +70,7 @@ function ContactForm() {
         </form>
       </div>
     </div>
-    </body>
+    </>
   );
 }
 

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -4,7 +4,7 @@ import homeLogo from "../../Assets/about.png";
 import Particle from "../Particle";
 import Home2 from "./Home2";
 import Type from "./Type";
-import designer from "../../Assets/design.svg";
+import {ReactComponent as Design} from "../../Assets/design.svg";
 
 import {
   AiFillGithub,
@@ -41,12 +41,7 @@ function Home() {
             </Col>
 
             <Col className="img-fluid" md={5} style={{ paddingBottom: 20 }}>
-              <img
-                src={designer}
-                alt="home pic"
-                className="img-fluid"
-                style={{ maxHeight: "450px" }}
-              />
+            <Design/>
             </Col>
           </Row>
         </Container>

diff --git a/src/components/Home/Home2.js b/src/components/Home/Home2.js
@@ -23,7 +23,7 @@ function Home2() {
         <Row>
           <Col md={8} className="home-about-description">
 
-            <h1 class="home2H1" style={{ fontSize: "2.2em", width: "500px", textAlign: "left"  }}>
+            <h1 className="home2H1" style={{ fontSize: "2.2em", width: "500px", textAlign: "left"  }}>
               A University Of Newcastle <span className="purple"> Student Led </span> Design Studio.
             </h1>
             <p className="home-about-body" style={{width: "500px", textAlign: "left", fontSize: "2.2em"  }}>

diff --git a/src/style.css b/src/style.css
@@ -28,8 +28,8 @@ html {
 }
 /* Must add this unique class in order for home to take BG */
 .HomeHeroSection{
-  position: relative;
-  height: 100vh;
+  position: relative !important;
+  height: 100% ;
   /* background: linear-gradient( to bottom left, rgba(0, 0, 0, 0.678), rgba(255,192,203, 0.200), rgba(22, 17, 37, 0.863) ); */
   /* background: linear-gradient(to top, #30cfd0 -50%, #330867 100%); */
   background-color: rgb(227, 227, 227);
@@ -303,13 +303,14 @@ a {
 }
 
 .home-section {
-  position: relative;
+  position: relative !important;
   z-index: -1;
   /* background-image: var(--image-gradient)/* , url(./Assets/home-bg.jpg) */;
   background-position: top center;
   background-repeat: no-repeat;
   /* padding-bottom: 30px !important; */
   padding-top: 30px !important;
+  padding-bottom: 7vh;
 }
 
 .home-content {
@@ -458,7 +459,7 @@ a {
 /* --------- */
 .footer {
   background-color: rgb(10, 4, 22);
-  bottom: 0 !important;
+  bottom: 0% !important;
   padding-top: 10px !important;
   padding-bottom: 8px !important ;
 }
@@ -980,4 +981,18 @@ a {
 
 .from-textarea {
  height: 100px;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #0d0d0d;
 }