From 7c2cab69de28d1dfa548131d078f8088645a4df0 Mon Sep 17 00:00:00 2001
From: Kevin-771 <70790256+Kevin-771@users.noreply.github.com>
Date: Fri, 24 May 2024 19:15:13 -0400
Subject: [PATCH] Add files via upload

---
 send_email.php | 20 ++++++++++++
 styles.css     | 77 ++++++++++++++++++++++++++++++++++++++++++++
 testing.html   | 87 +++++++++++++-------------------------------------
 3 files changed, 119 insertions(+), 65 deletions(-)
 create mode 100644 send_email.php
 create mode 100644 styles.css

diff --git a/send_email.php b/send_email.php
new file mode 100644
index 0000000..fde55ab
--- /dev/null
+++ b/send_email.php
@@ -0,0 +1,20 @@
+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = htmlspecialchars($_POST['name']);
+    $email = htmlspecialchars($_POST['email']);
+    $message = htmlspecialchars($_POST['message']);
+
+    $to = "your-email@example.com"; // Replace with your email address
+    $subject = "New Contact Form Submission";
+    $body = "Name: $name\nEmail: $email\n\nMessage:\n$message";
+    $headers = "From: $email";
+
+    if (mail($to, $subject, $body, $headers)) {
+        echo "Message successfully sent.";
+    } else {
+        echo "Message delivery failed.";
+    }
+} else {
+    echo "Invalid request method.";
+}
+?>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..002d866
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,77 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+h2 {
+    font-weight: bold;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+    text-align: center;
+}
+
+nav {
+    display: flex;
+    justify-content: center;
+    background-color: #444;
+}
+
+nav a {
+    color: #fff;
+    padding: 14px 20px;
+    text-decoration: none;
+    text-align: center;
+}
+
+nav a:hover {
+    background-color: #555;
+}
+
+.container {
+    padding: 20px 100px;
+}
+
+.gallery img {
+    width: 100%;
+    height: auto;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 10px;
+}
+
+.custom-submit-button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 1em;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+}
+
+.custom-submit-button:hover {
+    background-color: #45a049;
+}
+
+.custom-submit-button:active {
+    background-color: #3e8e41;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    bottom: 0;
+    width: 100%;
+}
diff --git a/testing.html b/testing.html
index 4e378a6..3b54101 100644
--- a/testing.html
+++ b/testing.html
@@ -4,98 +4,55 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tattoo Portfolio</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f4f4;
-        }
-        header {
-            background-color: #333;
-            color: #fff;
-            padding: 10px 0;
-            text-align: center;
-        }
-        nav {
-            display: flex;
-            justify-content: center;
-            background-color: #444;
-        }
-        nav a {
-            color: #fff;
-            padding: 14px 20px;
-            text-decoration: none;
-            text-align: center;
-        }
-        nav a:hover {
-            background-color: #555;
-        }
-        .container {
-            padding: 20px;
-        }
-        .gallery img {
-            width: 100%;
-            height: auto;
-        }
-        .gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 10px;
-        }
-        footer {
-            background-color: #333;
-            color: #fff;
-            text-align: center;
-            padding: 10px 0;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
-    </style>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <header>
         <h1>Tattoo Portfolio</h1>
     </header>
+    <!--
     <nav>
         <a href="#home">Home</a>
         <a href="#about">About</a>
         <a href="#gallery">Gallery</a>
-        <a href="#contact">Contact</a>
+        <a href="#contact">Contact Us</a>
     </nav>
+    //-->
     <div class="container" id="home">
         <h2>Welcome to My Tattoo Portfolio</h2>
         <p>Explore my collection of tattoos and learn more about my work.</p>
     </div>
     <div class="container" id="about">
         <h2>About Me</h2>
-        <p>I am a professional tattoo artist with over 10 years of experience. My passion is creating unique and meaningful designs for my clients.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ultricies leo. Maecenas vel euismod odio, nec elementum dolor. Praesent vestibulum eget nisi at molestie. Etiam euismod ullamcorper justo, et cursus enim sollicitudin vel. In hac habitasse platea dictumst. Praesent congue tellus non nisi maximus facilisis. Proin tempor massa lorem, ut elementum nibh tempus at. In ornare vulputate metus, vitae porta felis efficitur quis. Nam viverra et sapien sed tincidunt. Curabitur malesuada at orci at rhoncus.</p>
     </div>
-    <div class="container gallery" id="gallery">
+    <div class="container" id="gallery_description">
         <h2>Gallery</h2>
-        <img src="tattoo1.jpg" alt="Tattoo 1">
-        <img src="tattoo2.jpg" alt="Tattoo 2">
-        <img src="tattoo3.jpg" alt="Tattoo 3">
-        <img src="tattoo4.jpg" alt="Tattoo 4">
-        <img src="tattoo5.jpg" alt="Tattoo 5">
-        <img src="tattoo6.jpg" alt="Tattoo 6">
+        <p>Explore my tattoo portfolio.</p>
+    </div>
+    <div class="container gallery" id="gallery">
+        <img src="images/07.jpg" alt="Tattoo 1">
+        <img src="images/07.jpg" alt="Tattoo 2">
+        <img src="images/07.jpg" alt="Tattoo 3">
+        <img src="images/07.jpg" alt="Tattoo 4">
+        <img src="images/07.jpg" alt="Tattoo 5">
+        <img src="images/07.jpg" alt="Tattoo 6" onclick="window.open('https://google.com/');">
     </div>
     <div class="container" id="contact">
-        <h2>Contact</h2>
+        <h2>Contact us</h2>
         <p>If you have any questions or would like to book an appointment, please reach out to me.</p>
-        <form>
+        <form action="send_email.php" method="post">
             <label for="name">Name:</label><br>
-            <input type="text" id="name" name="name"><br>
+            <input type="text" id="name" name="name" required><br>
             <label for="email">Email:</label><br>
-            <input type="email" id="email" name="email"><br>
+            <input type="email" id="email" name="email" required><br>
             <label for="message">Message:</label><br>
-            <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
-            <input type="submit" value="Submit">
+            <textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
+            <button type="submit" class="custom-submit-button">Submit</button>
         </form>
     </div>
     <footer>
         <p>&copy; 2024 Tattoo Portfolio. All rights reserved.</p>
     </footer>
 </body>
-</html>
+</html>
\ No newline at end of file