diff --git a/src/App.js b/src/App.js
index f9ee400..b662d6d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Contact from './components/Contact';
+import Footer from './components/Footer';
const App = () => {
return (
@@ -14,6 +15,7 @@ const App = () => {
} />
+
);
};
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 3219199..eab98b1 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -4,9 +4,7 @@ const Contact = () => {
return (
Contact Me
-
Email: jake@example.com
-
Phone: (123) 456-7890
- {/* Add more contact information as needed */}
+
Email: jake@runyan.dev
);
};
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..8d44d25
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,8 @@
+.footer {
+ background-color: #333;
+ text-align: center;
+ padding: 10px 0;
+ position: relative;
+ bottom: 0; /* Stick to the bottom */
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..6010941
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Footer.css';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Home.css b/src/components/Home.css
index 7f60855..c243d6f 100644
--- a/src/components/Home.css
+++ b/src/components/Home.css
@@ -1,18 +1,18 @@
.gallery {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
- margin: 0 auto; /* Adjust for spacing */
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ margin: 0 auto;
}
.gallery-photo {
- margin: 4px; /* Vertical padding between items */
- margin-left: 4px; /* Horizontal padding between items */
- margin-right: 4px; /* Horizontal padding between items */
- border-radius: 8px; /* Optional: Add rounded corners */
- display: block; /* Ensure images are block elements */
- height: auto; /* Maintain aspect ratio */
- max-width: 30vw;
- object-fit: cover; /* Ensure images cover the area without distortion */
+ margin: 4px;
+ margin-left: 4px;
+ margin-right: 4px;
+ border-radius: 8px;
+ display: block;
+ height: auto;
+ max-width: 30vw; /* Do not mix with max-height! */
+ object-fit: cover;
}
/* Responsive adjustments */