diff --git a/about.html b/about.html deleted file mode 100644 index 2e8306e..0000000 --- a/about.html +++ /dev/null @@ -1,154 +0,0 @@ - - - - - - - Home - - - - - - - - - - - - - - - - -
- - -
- -
- -
-

My name is Ivana Tumbeva

-

- I have been a family and portrait photographer for 5 years, - capturing genuine emotions and timeless moments. Since 2022, I have - been studying photography at Griffith College Dublin, continuously - refining my skills and artistic vision. -

-

- As a photographer, I am deeply passionate about capturing raw emotions and the unspoken beauty of human connection. - Portrait and family photography allow me to freeze moments of love, laughter, and vulnerability, turning them into timeless memories. - Through my lens, I strive to reveal not just faces, but the depth of feelings that make each person unique. - Photography, to me, is more than an art—it’s a way to honor relationships, preserving the warmth of a touch or the sparkle in someone’s eyes. -

- - -
-
- - - - - - - - - - - - - \ No newline at end of file diff --git a/about.php b/about.php new file mode 100644 index 0000000..5fbaf79 --- /dev/null +++ b/about.php @@ -0,0 +1,45 @@ + + + +
+ Photographer Ivana +
+

My name is Ivana Tumbeva

+

+ I have been a family and portrait photographer for 5 years, + capturing genuine emotions and timeless moments. Since 2022, I have + been studying photography at Griffith College Dublin, continuously + refining my skills and artistic vision. +

+

+ As a photographer, I am deeply passionate about capturing raw emotions and the unspoken beauty of human connection. + Portrait and family photography allow me to freeze moments of love, laughter, and vulnerability, turning them into timeless memories. + Through my lens, I strive to reveal not just faces, but the depth of feelings that make each person unique. + Photography, to me, is more than an art—it’s a way to honor relationships, preserving the warmth of a touch or the sparkle in someone’s eyes. +

+ + +
+
+ + diff --git a/account.php b/account.php new file mode 100644 index 0000000..ba5666d --- /dev/null +++ b/account.php @@ -0,0 +1,80 @@ +prepare("DELETE FROM Booking WHERE BookingID = ? AND UserID = ?"); + $deleteQuery->bind_param("ii", $bookingID, $_SESSION['UserID']); + $deleteQuery->execute(); + $deleteQuery->close(); + } + echo "

Selected booking(s) deleted successfully.

"; + } elseif ($action === "edit") { + if (count($selectedBookings) == 1) { + $bookingID = $selectedBookings[0]; + // Scroll ile form bölümüne yönlendir + header("Location: booking.php?edit_id=$bookingID#bookingForm"); + exit(); + } else { + echo "

Please select only one booking to edit.

"; + } + } +} +?> + +
+

Welcome, !

+ +
+
+ + + prepare("SELECT BookingID, DateOfShoot, TimeOfShoot, TypeOfShoot, Message, City FROM Booking WHERE UserID = ?"); + $dateBring->bind_param("i", $_SESSION['UserID']); + $dateBring->execute(); + $result = $dateBring->get_result(); + + if ($result && $result->num_rows > 0) { + while ($row = $result->fetch_assoc()) { + echo "
"; + echo ""; + echo "
"; + } + + echo "
"; + echo ""; + echo ""; + echo "
"; + } else { + echo "

You have no bookings yet.

"; + } + + $dateBring->close(); + ?> +
+
+
+ + diff --git a/booking.html b/booking.html deleted file mode 100644 index 1be4d9c..0000000 --- a/booking.html +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - - Booking - - - - - - - - - - - - - - - - - -
- - -
- - -
- -
- - - - - - - - - \ No newline at end of file diff --git a/booking.php b/booking.php index 1c1d317..3a677b3 100644 --- a/booking.php +++ b/booking.php @@ -1,34 +1,112 @@ prepare("INSERT INTO booking (date, time, text) VALUES (?,?,?)"); - - // Bind the form values to the prepared statement - // The "sss" means all three parameters (date, time, and text) are strings - $query->bind_param("sss", $formatted_date, $user_time, $user_text); - - // Execute the query and check if it was successful +$page_title = "Booking"; +session_start(); +include("./nav.php"); +include("./connection.php"); + +// Default values for form fields +$edit_mode = false; +$date_value = ""; +$time_value = ""; +$city_value = ""; +$type_value = ""; +$message_value = ""; +$bookingID = null; + +if (isset($_GET['edit_id']) && isset($_SESSION['UserID'])) { + $edit_mode = true; + $bookingID = $_GET['edit_id']; + + $query = $conn->prepare("SELECT * FROM Booking WHERE BookingID = ? AND UserID = ?"); + $query->bind_param("ii", $bookingID, $_SESSION['UserID']); + $query->execute(); + $result = $query->get_result(); + + if ($result && $result->num_rows > 0) { + $booking = $result->fetch_assoc(); + $date_value = $booking['DateOfShoot']; + $time_value = $booking['TimeOfShoot']; + $city_value = $booking['City']; + $type_value = $booking['TypeOfShoot']; + $message_value = $booking['Message']; + } + $query->close(); +} + +// Handle form submission +if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit']) && isset($_SESSION['UserID'])) { + $user_date = $_POST['date']; + $user_time = $_POST['time']; + $user_location = $_POST['location_book']; + $user_type = $_POST['photoshoot'] ?? ''; + $user_text = $_POST['text']; + $user_id = $_SESSION['UserID']; + + if ($edit_mode && $bookingID) { + $query = $conn->prepare("UPDATE Booking SET DateOfShoot=?, TimeOfShoot=?, City=?, TypeOfShoot=?, Message=? WHERE BookingID=? AND UserID=?"); + $query->bind_param("sssssii", $user_date, $user_time, $user_location, $user_type, $user_text, $bookingID, $user_id); + } else { + $query = $conn->prepare("INSERT INTO Booking (DateOfShoot, TimeOfShoot, City, TypeOfShoot, Message, UserID) VALUES (?, ?, ?, ?, ?, ?)"); + $query->bind_param("sssssi", $user_date, $user_time, $user_location, $user_type, $user_text, $user_id); + } + if ($query->execute()) { - // If the query is successful, output a success message - echo "added date: " . $formatted_date . " successfully"; + echo "

Booking " . ($edit_mode ? "updated" : "created") . " successfully!

"; } else { - // If there's an error with the query execution, output the error message - echo "error: " . $query->error; + echo "

Error: " . $query->error . "

"; } + $query->close(); } - -// Close the prepared query after execution to free up resources -$query->close(); ?> + + +
+ +
+ + diff --git a/connection.php b/connection.php index d5e9934..3dc3815 100644 --- a/connection.php +++ b/connection.php @@ -1,14 +1,21 @@ 0) { - die("No Connection " . mysqli_connect_errno()); - } +// Set character encoding to UTF-8 (important for reading special characters like Turkish letters) +mysqli_set_charset($conn, "UTF8"); +// Check if the connection to the database failed +if (mysqli_connect_errno() > 0) { + // If there is an error, stop the code and show the error number + die("No Connection. Error number: " . mysqli_connect_errno()); + +} ?> \ No newline at end of file diff --git a/css/account.css b/css/account.css new file mode 100644 index 0000000..e697252 --- /dev/null +++ b/css/account.css @@ -0,0 +1,76 @@ +/* ACCOUNT SECTION */ + +#account { + padding: 2rem; +} + +#account h1 { + color: #e5989b; /* Sets text color to pink */ + font-size: 2.6em; /* Increases font size */ + text-shadow: 2px 2px black; /* Adds black text shadow */ + letter-spacing: 0.4em; /* Increases space between letters */ + margin: 0.6em; /* Adds spacing */ + width: 100%; +} +#account_container { + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + max-width: 30rem; + margin: 2rem auto; + padding: 1rem; + background-color: #f9f9f9; + border-radius: 10px; +} + +.account_h2 { + margin: 2rem; + text-align: center; +} + +.booking-box { + border: 1px solid #ddd; + padding: 1rem; + margin-bottom: 1rem; + border-radius: 8px; + background-color: white; +} + +.booking-label { + display: flex; + align-items: center; + gap: 10px; +} + +.booking-info p { + margin: 0.3rem 0; +} + +.booking-actions { + text-align: center; + margin-top: 1rem; +} + +.edit-btn { + padding: 0.5rem 1rem; + margin-right: 1rem; + background-color: #e5989b; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.delete-btn { + padding: 0.5rem 1rem; + background-color: red; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.no-booking-message { + text-align: center; +} diff --git a/css/booking.css b/css/booking.css index bdb1155..03530e6 100644 --- a/css/booking.css +++ b/css/booking.css @@ -1,49 +1,50 @@ -.booking_container { +.booking_form { display: flex; /* Enables flexbox layout */ /* Centers the container with margin */ flex-direction: column; /* Stacks child elements vertically */ - align-items: center; /* Centers elements horizontally */ + align-items: baseline; /* Centers elements horizontally */ /* Adds padding inside */ justify-content: center; /* Centers elements vertically */ + text-align: left; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; /* Adds shadow effect */ + margin: 2rem auto; + padding: 1rem; } - -hr { +.booking_form input { + width: 100%; + margin: auto; +} +.booking_form label { + margin: 0.5em 0; +} +.booking_form hr { margin: 1em 0; /* Adds spacing above and below */ color: #e5989b; /* Sets horizontal rule color */ border: 1px solid #e5989b; /* Adds border */ opacity: 0.2; /* Reduces visibility */ } -.booking_container h1 { +.booking_form h1 { color: #e5989b; /* Sets text color to pink */ text-align: center; /* Centers the heading */ font-size: 2.6em; /* Increases font size */ text-shadow: 2px 2px black; /* Adds black text shadow */ letter-spacing: 0.4em; /* Increases space between letters */ margin: 0.6em; /* Adds spacing */ + width: 100%; } -.form { - margin: auto; /* Centers the form */ - padding: 0; -} - -.location { +.booking_form .location { display: flex; /* Enables flexbox */ justify-content: baseline; /* Aligns items to the baseline */ } -.location label { - width: 50%; /* Sets label width */ -} - /* This styling allows form legend be placed in one column and radio buttons in the other */ -fieldset { +.booking_form fieldset { display: contents; } -fieldset.photoshoot > legend { +.booking_form fieldset.photoshoot > legend { font-weight: bold; /* Makes legend same as other form labels*/ } @@ -56,28 +57,41 @@ fieldset.photoshoot > legend { display: flex; /* Enables flexbox */ align-items: center; /* Centers items vertically */ justify-content: baseline; /* Aligns items to the baseline */ + font-size: 1.4rem; } -textarea { - width: 100%; /* Sets width to the full size of the page*/ +.booking_form textarea { + width: 95%; /* Sets width to the 95% size of the page*/ height: 6em; /* Sets bigger height */ border-color: #e5989b; /* Sets border color to pink */ + margin: 0.2rem auto; } - -.button-area { - display: flex; /* Enables flexbox */ - flex-direction: column; /* Stacks buttons vertically */ - align-items: center; /* Centers buttons horizontally */ +.booking_form .button-area { + width: 70%; + margin: auto; + text-align: center; +} +.booking_form button { + margin: 1em 0; /* Adds vertical spacing */ + background-color: #e5989b; /* Sets background color to light pink */ + padding: 1em 3em; /* Adds padding inside the button */ + border: 1px solid transparent; /* Removes border */ + border-radius: 4em; /* Rounds the button edges */ + color: white; /* Sets text color to white*/ + cursor: pointer; /* Changes cursor to pointer */ + transition: 0.5s ease; /* Adds smooth transition effect */ } -button { - width: 70%; /* Sets button width */ +.booking_form button:hover { + background-color: #f5f5f5; /* Changes background to light gray on hover */ + color: #e5989b; /* Changes text color to light pink on hover */ + border: 1px solid #3b3030; /* Adds a dark brown border on hover */ } -.note { - background-color: #e5989b; /* Sets background color to pink*/ +.booking_form .note { + background-color: #e5989b; opacity: 0.6; /* Sets opacity to 60% */ padding: 1em; /* Adds padding inside */ border-radius: 1rem; /* Make corners rounder */ - margin: 1em 0; /* Adds vertical spacing */ + margin: 1rem auto; /* Adds vertical spacing */ } diff --git a/css/desktop.css b/css/desktop.css index 5e9b486..9def154 100644 --- a/css/desktop.css +++ b/css/desktop.css @@ -2,7 +2,7 @@ /* Applies styles when screen width is 1000px or larger */ body { - font-size: 1.8em; /* Increases font size for larger screens */ + font-size: 2em; /* Increases font size for larger screens */ } p, @@ -23,7 +23,9 @@ #about { justify-content: space-evenly; /* Spreads elements evenly in about section */ } - + .about_detail { + flex-direction: row; + } #about img { width: 18em; /* Increases image size */ } @@ -68,13 +70,17 @@ .form input { width: 50%; /* Makes input fields take half of the width */ } - /* FOOTER */ - aside .footer-menu { - display: flex; /* Ensures footer menu is displayed in a row */ + /* CONTACT FORM */ + .contact_form input { + width: 50%; } + /* FOOTER */ + .footer-menu { + display: flex; /* Turns the element into a flex container so its children can be laid out using flexbox. */ + flex-direction: row; /* Aligns child elements in a horizontal row, from left to right. */ - aside .footer-item { - margin: 1em 1.5em; /* Adds spacing between footer items */ + text-align: center; /* Horizontally centers the text inside the element. */ + justify-content: center; /* Horizontally centers the child elements inside the flex container. */ } #navbar img { @@ -82,7 +88,7 @@ } /* SIGN IN AND LOG IN PAGE */ - #signin_container, + #signup_container, #login_container { display: flex; /* Enables flexbox layout */ flex-direction: row; /* Aligns elements in a row */ @@ -90,14 +96,42 @@ justify-content: center; /* Centers content horizontally */ animation: all 2s ease-in; /* Adds animation effect */ } - - .auth_container, + .password-rules { + width: 40%; + } + .auth_container { + width: 45%; /* Reduces width for better alignment */ + height: 100%; + margin: 2rem 2rem; /* Adds spacing */ + padding: 2rem; /* Adds padding inside */ + } .side_container { - width: 40%; /* Reduces width for better alignment */ - margin: 2em 0.5em; /* Adds spacing */ - padding: 1em; /* Adds padding inside */ + width: 45%; + margin: 2rem 2rem; } + /* BOOKING PAGE */ + .booking_form { + width: 30%; + } + .booking_form input { + margin: auto; + width: 100%; + } + + /* Gallery page page layout set*/ + + /* Horizontal image will take up half of the images row*/ + .horizontal { + width: 48%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ + } + + /* Vertical image will show 4 in one row */ + .vertical { + width: 23%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ + } /* Animations */ @keyframes fadeOut { from { diff --git a/css/footer.css b/css/footer.css index efb315a..5bf0708 100644 --- a/css/footer.css +++ b/css/footer.css @@ -12,34 +12,33 @@ footer { width: 100%; /* Makes footer full width */ color: #3b3030; /* Sets text color to dark brown */ position: relative; /* Ensures proper placement in layout */ - bottom: 0; /* Positions footer at the bottom */ margin-top: auto; /* Pushes the footer to the bottom of the page */ } -#container { +footer #container { display: grid; /* Enables grid layout */ grid-template-columns: 1fr 1fr 1fr; /* Creates 3 equal columns */ justify-content: space-evenly; /* Distributes elements evenly */ - align-items: flex-start; /* Aligns items vertically in the center */ + align-items: center; /* Aligns items vertically in the center */ width: 100%; /* Ensures full width */ } /* Contact Me section */ -address { +.contact { display: flex; /* Enables flex layout */ flex-direction: column; /* Places elements in vertical axis */ - align-items: flex-start; /* Aligns items vertically in the center */ + align-items: center; /* Aligns items vertically in the center */ font-style: normal; /* Resets any italic styles */ - margin: 0 0 0 1rem; /* Adds spacing at the left side */ + margin: 0 0 0 1em; /* Adds spacing at the left side */ } /* Class Pages */ .pages { text-align: center; /* Centers text */ } - -.footer-item { - margin: 0 0 0.6rem 0; /* Adds vertical spacing below the link */ +.footer-menu { + display: flex; + flex-direction: column; } .footer-item a { @@ -55,21 +54,20 @@ address { .footer-links { display: flex; /* Enables flex layout for social media section */ flex-direction: column; /* Places elements in vertical axis */ - justify-content: space-around; - align-items:center; + justify-content: space-around; + align-items: center; } /* Class social-media */ .social-media { - display:flex; /* Enables flex layout for social media links */ - flex-direction: row; /* Places elements in horizontal axis */ - justify-content: space-around; /* Distributes elements evenly */ - align-items: flex-start; /* Aligns items vertically in the center */ + display: flex; /* Enables flex layout for social media links */ + flex-direction: row; /* Places elements in vertically axis */ + justify-content: center; /* Distributes elements evenly */ + align-items: center; /* Aligns items vertically in the center */ text-align: center; /* Centers social media icons */ } - .social-media i { - margin: 0.3em 0.3em; /* Adds spacing around icons */ + margin: 0.5em 0.3em; /* Adds spacing around icons */ font-size: 2em; /* Sets icon size */ color: #795757; /* Sets default icon color */ transition: 0.6s; /* Adds smooth transition effect */ diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 0000000..32c50a4 --- /dev/null +++ b/css/gallery.css @@ -0,0 +1,56 @@ +/* Style for gallery page +- Uses flexbox to arrange content in a row and wrap if not enough space. +- content is aligned at the center of the page +- sets gap between images +*/ +.gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-basis: auto; + justify-content: center; + gap: 10px; + padding: 2em; +} +.gallery_page h1 { + color: #e5989b; /* Sets text color to pink */ + text-align: center; /* Centers the heading */ + font-size: 2.6em; /* Increases font size */ + text-shadow: 2px 2px black; /* Adds black text shadow */ + letter-spacing: 0.4em; /* Increases space between letters */ + margin: 0.6em; /* Adds spacing */ +} +/* For horizontal images width is the size of the screen */ +.horizontal { + width: 100%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ +} + +/* For horizontal images width is half the size of the screen, showing 2 images in one row */ +.vertical { + width: 48%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ +} +@media (min-width: 1000px) { + /* Gallery page page layout set*/ + + /* Horizontal image will take up half of the images row*/ + .horizontal { + width: 48%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ + } + + /* Vertical image will show 4 in one row */ + .vertical { + width: 23%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ + } +} +@media (min-width: 768px) { + /* Gallery page page layout set*/ + /* Vertical image will show 3 in one row */ + .vertical { + width: 32%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ + } +} diff --git a/css/login_signin.css b/css/login_signup.css similarity index 85% rename from css/login_signin.css rename to css/login_signup.css index 3b731e9..0e56d70 100644 --- a/css/login_signin.css +++ b/css/login_signup.css @@ -1,13 +1,15 @@ -main { - display: flex; /* Enables flexbox layout */ - flex-direction: column; /* Stacks child elements vertically */ - justify-content: flex-start; /* Aligns content at the top */ - align-items: baseline; /* Aligns content to the text baseline */ +#login_container, +#signup_container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: baseline; + margin: 2rem 2rem; } .auth_container { font-size: 1.2em; /* Sets text size */ - width: 95%; /* Takes up 95% of available width */ + width: 100%; /* Takes up 95% of available width */ margin: 0.5em auto; /* Centers container with top-bottom margin */ padding: 2em; /* Adds space inside */ background: white; /* White background */ @@ -28,7 +30,7 @@ main { text-shadow: 2px 2px black; /* Black text shadow */ } -input { +.input-place input { width: 100%; /* Full width input */ padding: 1em; /* Adds padding */ margin: 1em auto; /* Centers input with margin */ @@ -51,8 +53,22 @@ input { transform: translateY(-50%); /* Aligns icon vertically */ } -#password { - color: #e5989b; +#passwordInput { + position: relative; +} +.password-rules { + display: none; + position: absolute; + padding: 1em; + width: 60%; + font-size: 1rem; + font-weight: bold; + text-align: left; + color: #555; + background-color: #f7f7f7; + border-radius: 1rem; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + transition: all 10s ease; } .socialmedia { @@ -90,20 +106,27 @@ button { cursor: pointer; /* Changes cursor to pointer */ transition: 0.5s ease; /* Adds smooth transition effect */ } +#signin_container { + display: flex; + min-height: 100vh; + margin: 2rem 2rem; +} .side_container { + height: 100%; + width: 100%; /* Takes up 95% of available width */ display: flex; /* Enables flexbox */ - width: 95%; /* Takes up 95% of available width */ border-radius: 1em; /* Rounds corners */ - margin: 3em auto; /* Centers container with spacing */ - padding: 5em 0; /* Adds vertical padding */ + margin: 2em auto; + padding: 1em 0; /* Adds vertical padding */ align-items: center; /* Centers items vertically */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Adds shadow effect */ flex-direction: column; /* Stacks child elements vertically */ justify-content: center; /* Centers items horizontally */ + text-align: center; } -.signin { +.signup { animation: fadeout 1s ease-in-out; /* Applies fade-out animation */ } .login { diff --git a/css/style.css b/css/style.css index b8de5fc..b45018c 100644 --- a/css/style.css +++ b/css/style.css @@ -86,7 +86,7 @@ Dark Button Styling 22, 21, 21, - 0.2 + 0.001 ); /* Dark gray background with 20% transparency */ padding: 2em; /* Adds space inside the container */ display: flex; /* Enables flexbox layout */ @@ -98,8 +98,6 @@ Dark Button Styling .card_list .image { width: 20em; /* Sets image width */ - - border-radius: 2em; /* Rounds image corners */ } .swiper-slide { @@ -114,18 +112,21 @@ Dark Button Styling align-items: center; /* Aligns elements vertically at the center */ box-sizing: border-box; /* Includes padding and border in the total size */ } +.about_detail { + flex-direction: column; +} #about img { width: 10em; /* Sets image width */ - margin: 0 1em; /* Adds horizontal spacing */ + margin: 1em; /* Adds horizontal spacing */ } .about_her { - width: 50%; /* Takes up 50% of the parent container */ + width: 95%; /* Takes up 50% of the parent container */ display: flex; /* Enables flexbox layout */ flex-direction: column; /* Stacks child elements vertically */ justify-content: baseline; /* Aligns content to the baseline */ - align-items: baseline; /* Aligns items to the text baseline */ + align-items: end; /* Aligns items to the text baseline */ } .about_her h1 { @@ -143,6 +144,9 @@ Dark Button Styling .about_her p { margin-bottom: 1.2em; /* Adds bottom spacing */ } +.about_her .button_dark { + margin-right: 3em; +} /* HOME GALLERY SIDE */ @@ -189,9 +193,6 @@ Dark Button Styling width: 12em; /* Sets image width */ height: 260px; /* Sets image height */ margin: 5px; /* Adds spacing around images */ - box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, - rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, - rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; /* Adds shadow effect */ } /* PROCESS */ @@ -200,66 +201,97 @@ hgroup { flex-direction: row; } -i.fa-star { - color: #ffd43b; +#process h1 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 2rem; + font-weight: bold; } -#process { - margin-bottom: 1em; /* Adds space below the section */ - box-sizing: border-box; /* Ensures padding and border are included in the total size */ - flex-wrap: wrap; /* Allows items to wrap to a new line if needed */ - display: flex; /* Enables flexbox layout */ - align-items: center; /* Aligns items vertically in the center */ - justify-content: space-evenly; /* Evenly distributes items with equal spacing */ +.process-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + padding: 0 2rem; + margin: 1rem 0; } - -#process h1 { - font-size: 2em; /* Sets the font size for the heading */ - margin: 0.7em 0; /* Adds vertical spacing */ +.process-card:nth-child(1) { + background-image: url("../media/gettouch.png"); + background-position: top; } -#process i { - font-size: 2em; /* Sets the icon size */ +.process-card:nth-child(2) { + background-image: url("../media/planning.png"); } - -.process_container { - display: flex; /* Enables flexbox layout */ - justify-content: flex-start; /* Aligns content to the left */ - text-align: center; /* Centers text inside the container */ - flex-wrap: wrap; /* Allows items to wrap if they don’t fit */ +.process-card:nth-child(3) { + background-image: url("../media/deposit.png"); } - -.process_container i { - margin-bottom: 0.5em; /* Adds space below icons */ - color: #e5989b; /* Sets icon color */ - font-size: 2em; /* Sets icon size */ +.process-card:nth-child(4) { + background-image: url("../media/shooting.png"); } - -.process_container .process { - width: 50%; /* Each item takes up 50% of the parent container */ - margin: 1em 0; /* Adds vertical spacing */ - position: relative; /* Allows for absolute positioning inside */ - display: inline-block; /* Ensures inline-level display */ - cursor: pointer; /* Changes cursor to pointer on hover */ +.process-card:nth-child(5) { + background-image: url("../media/editing.png"); + background-position: bottom; +} +.process-card:nth-child(6) { + background-image: url("../media/delivery.png"); +} +.process-card:nth-child(7) { + background-image: url("../media/additional.png"); +} +.process-card:nth-child(8) { + background-image: url("../media/rate.png"); + background-position: center; +} +.process-card * { + position: relative; + z-index: 1; +} +.process-card { + background-size: cover; + background-position: center; + position: relative; + min-height: 13rem; + padding: 1.5rem; + border-radius: 1rem; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + text-align: center; + transition: transform 0.3s ease; + display: flex; + flex-direction: column; + justify-content: flex-end; } -.tooltip-text { - visibility: hidden; /* Hides the tooltip by default */ - width: 20em; /* Sets tooltip width */ - color: #3b3030; /* Sets text color */ - left: 0; /* Positions it at the left */ - opacity: 0; /* Makes it fully transparent */ - transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */ +.process-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: 1rem; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 0; +} +.process-card:hover { + transform: translateY(-1px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); + cursor: pointer; } -.process:hover .tooltip-text { - visibility: visible; /* Makes the tooltip visible */ - opacity: 1; /* Fully visible when hovered */ +.process-card i { + font-size: 2.5rem; + color: #d67c8a; + margin-bottom: 1rem; +} +.process-card h4 { + font-size: 1.3rem; + color: white; } -.process summary > p { - font-size: 1.2em; /* Sets paragraph font size */ - font-weight: bold; /* Makes the text bold */ +.process-card p { + font-size: 0.95rem; + color: white; } /* BOOK BUTTON */ @@ -284,28 +316,28 @@ i.fa-star { } /* FORM SECTION */ -.form { - margin: 1.5em 0; /* Adds vertical margin */ +.contact_form { + margin: 1.5em auto; /* Adds vertical margin */ display: flex; /* Enables flexbox layout */ flex-direction: column; /* Stacks elements vertically */ + text-align: right; /* Centers text */ align-items: center; /* Centers elements horizontally */ justify-content: center; /* Centers elements vertically */ - text-align: center; /* Centers text */ border-radius: 8px; /* Rounds the edges of the form */ - padding: 20px; /* Adds space inside the form */ + padding: 1rem; /* Adds space inside the form */ background: #f5f5f5; /* Sets background color to light gray */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Adds a soft shadow */ } -.form label { +.contact_form label { display: block; /* Makes the label appear on a new line */ font-weight: bold; /* Makes the label text bold */ margin-top: 10px; /* Adds space above the label */ } -.form input { +.contact_form input { width: 100%; /* Makes input fields take full width */ - padding: 0.4em; /* Adds padding inside inputs */ + padding: 0.8em; /* Adds padding inside inputs */ margin-top: 5px; /* Adds space above the input field */ border: none; /* Removes default border */ outline: none; /* Removes default outline */ @@ -314,19 +346,19 @@ i.fa-star { font-size: 16px; /* Sets font size */ } -.form h1 { +.contact_form h1 { text-align: left; /* Aligns text to the left */ font-size: 1.5em; /* Sets font size */ margin: 1.5em 0; /* Adds vertical spacing */ } -.form h2 { +.contact_form h2 { text-align: left; /* Aligns text to the left */ font-size: 1.2em; /* Sets font size */ margin: 1.5em 0; /* Adds vertical spacing */ } -.form button { +.contact_form button { margin: 1em 0; /* Adds vertical spacing */ background-color: #e5989b; /* Sets background color to light pink */ padding: 1em 3em; /* Adds padding inside the button */ @@ -337,8 +369,10 @@ i.fa-star { transition: 0.5s ease; /* Adds smooth transition effect */ } -.form button:hover { +.contact_form button:hover { background-color: #f5f5f5; /* Changes background to light gray on hover */ color: #e5989b; /* Changes text color to light pink on hover */ border: 1px solid #3b3030; /* Adds a dark brown border on hover */ } + + diff --git a/css/tablet.css b/css/tablet.css index 9067f8c..4fbb0dd 100644 --- a/css/tablet.css +++ b/css/tablet.css @@ -24,18 +24,25 @@ } /* Footer */ - aside .footer-menu { - display: flex; /* Displays footer menu items in a row */ + .footer-menu { + display: flex; /* Turns the element into a flex container so its children can be laid out using flexbox. */ + flex-direction: row; /* Aligns child elements in a horizontal row, from left to right. */ + + text-align: center; /* Horizontally centers the text inside the element. */ + justify-content: center; /* Horizontally centers the child elements inside the flex container. */ } - aside .footer-item { - margin: 1em 1.5em; /* Adds spacing between footer items */ + .footer-item { + margin: 1em 1em; /* Adds spacing between footer items */ + } + .process-grid { + grid-template-columns: repeat(2, 1fr); /* tablet */ } - /* LOG IN / SIGN IN */ - .login_container, - .side_container, - .signin_container { - width: 60%; /* Sets container width to 60% of the screen */ + /* Gallery page page layout set*/ + /* Vertical image will show 3 in one row */ + .vertical { + width: 32%; /* Sets image width */ + object-fit: cover; /* Makes all images fit in the same width */ } } diff --git a/footer.php b/footer.php new file mode 100644 index 0000000..6fd66f5 --- /dev/null +++ b/footer.php @@ -0,0 +1,38 @@ + + + + + + + + + + + diff --git a/gallery.php b/gallery.php new file mode 100644 index 0000000..2429fb0 --- /dev/null +++ b/gallery.php @@ -0,0 +1,35 @@ +prepare("SELECT filePath FROM Photos;"); // SQL to get all files from photos database +$query->execute(); // executes query +$result = $query->get_result(); // creates an object of results +//var_dump($result); +$user = mysqli_fetch_all($result, MYSQLI_ASSOC); // makes results appear as array +//var_dump($user); +?> +
+

Gallery

+
+ $size[1]) { + echo ''; // show image from found filepath + } + else + echo ''; // show image from found filepath + +} +?> +
+
+ \ No newline at end of file diff --git a/account.html b/html/account.html similarity index 93% rename from account.html rename to html/account.html index ee9966e..a617100 100644 --- a/account.html +++ b/html/account.html @@ -1,12 +1,11 @@ - - Home + Account
-