Front end project

2025-12-01 23:54:45 -05:00
parent ffad8e4e61
commit 22f7347a2a
12 changed files with 368 additions and 2 deletions
--- a/Dev)/Projects/Final
+++ b/Dev)/Projects/Final
--- a/Project/contact.html
+++ b/Project/contact.html
@@ -3,7 +3,7 @@

 <head>
    <title>Pet Showcase - Contact</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
 </head>

 <body>
--- a/Project/css/style.css
+++ b/Project/css/style.css
@@ -0,0 +1,155 @@
+/* Keyframe animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Mobile-first design */
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background: #f8f9fa;
+    color: #222;
+    margin: 0;
+    padding: 0 1rem;
+}
+
+h1,
+h2,
+h3 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0;
+    margin: 1rem 0;
+    list-style: none;
+}
+
+nav a {
+    background: #2980b9;
+    color: #fff;
+    padding: 0.5rem;
+    border-radius: 4px;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s, transform 0.3s;
+}
+
+nav a:hover {
+    background: #1c5a85;
+    transform: scale(1.07);
+}
+
+section {
+    background: #fff;
+    margin: 1rem 0;
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
+    animation: fadeIn 1s ease
+}
+
+section img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+}
+
+form {
+    background: #fff;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.05);
+}
+
+input,
+textarea {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 0.75rem;
+    border: 1px solid #bbb;
+    border-radius: 4px;
+}
+
+button {
+    width: 48%;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    background: #2980b9;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-weight: bold;
+}
+
+button[type="reset"] {
+    background: red;
+}
+
+footer {
+    text-align: center;
+    margin: 2rem 0 1rem 0;
+    color: #888;
+    font-size: 0.95rem;
+}
+
+/* Layout for larger screens */
+@media (min-width: 600px) and (max-width: 899px) {
+    body {
+        padding: 0 2rem;
+    }
+
+    nav ul {
+        flex-direction: row;
+        justify-content: center;
+        gap: 1rem;
+    }
+
+    section,
+    form {
+        max-width: 650px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    h1 {
+        font-size: 2.2rem;
+    }
+}
+
+@media (min-width: 900px) {
+    body {
+        padding: 0 4rem;
+    }
+
+    nav ul {
+        flex-direction: row;
+        justify-content: center;
+        gap: 2rem;
+    }
+
+    section,
+    form {
+        max-width: 900px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    h1 {
+        font-size: 3rem;
+    }
+}
--- a/Project/img/rocco.jpeg
+++ b/Project/img/rocco.jpeg
--- a/Dev)/Projects/Final
+++ b/Dev)/Projects/Final
@@ -3,7 +3,7 @@

 <head>
    <title>Pet Showcase - Home</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
 </head>

 <body>
--- a/Project/sources.txt
+++ b/Project/sources.txt
@@ -0,0 +1 @@
+All images were taken by me and uploaded to my PC from my phone, only credit to give would be to me
--- a/Dev)/Projects/Final
+++ b/Dev)/Projects/Final
				`@@ -0,0 +1 @@`
				`All images were taken by me and uploaded to my PC from my phone, only credit to give would be to me`