commit
bbccf3392c
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 426 B |
@ -0,0 +1,274 @@ |
|||||||
|
*{ |
||||||
|
margin:0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
font-family: 'Poppins', sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
font-family: Arial,sans-serif; |
||||||
|
background-color: beige; |
||||||
|
color: #333; |
||||||
|
line-height: 1.6; |
||||||
|
} |
||||||
|
|
||||||
|
/* a{ |
||||||
|
text-decoration: none; |
||||||
|
color: #4CAF50; |
||||||
|
} */ |
||||||
|
|
||||||
|
header{ |
||||||
|
background-image: url('logo.png'); |
||||||
|
color: white; |
||||||
|
text-align: center; |
||||||
|
padding: 60px 20px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.header p{ |
||||||
|
font-size: 1.2em; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
max-width: 700px; |
||||||
|
margin: 30px auto; |
||||||
|
padding: 20px; |
||||||
|
background: #faf4f5; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
||||||
|
} |
||||||
|
|
||||||
|
/* .container h2{ |
||||||
|
font-size: 10em; |
||||||
|
color: black; |
||||||
|
border-bottom: 2px ; |
||||||
|
padding-bottom: 5px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} */ |
||||||
|
|
||||||
|
form{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
label{ |
||||||
|
font-weight: bold; |
||||||
|
display: block; |
||||||
|
margin-bottom: 8px; |
||||||
|
color: #555; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
input,select,button{ |
||||||
|
width: 100%; |
||||||
|
padding: 12px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input:focus, select:focus{ |
||||||
|
outline: none; |
||||||
|
border-color: #4CAF50; |
||||||
|
box-shadow: 0 0 5px #4CAF50(0, 123,255,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
button{ |
||||||
|
background-color: #4CAF50; |
||||||
|
color: white; |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 1.1em; |
||||||
|
transition: background-color 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
button:hover{ |
||||||
|
background-color: #4CAF50; |
||||||
|
} |
||||||
|
|
||||||
|
.matches{ |
||||||
|
background: #f9f9f9; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.match-item{ |
||||||
|
padding: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border: 1px solid #cce5ff; |
||||||
|
background-color: #e6f0ff; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
color: #333; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.match-item:hover{ |
||||||
|
background-color: #d9eaff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.footer { |
||||||
|
text-align: center; |
||||||
|
padding: 15px 20px; |
||||||
|
background: #4CAF50; |
||||||
|
color: white; |
||||||
|
margin-top: 30px; |
||||||
|
font-size: 0.9em; |
||||||
|
} |
||||||
|
|
||||||
|
.popup{ |
||||||
|
position: fixed; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
background-color: #ffffff; |
||||||
|
border: 1px solid #ccc; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 5px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
p{ |
||||||
|
margin-top: 5px; |
||||||
|
margin-bottom: 5px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/* navigation-bar */ |
||||||
|
.hero{ |
||||||
|
width: 100%; |
||||||
|
min-height: 30vh; |
||||||
|
background: beige; |
||||||
|
color: lightgreen; |
||||||
|
} |
||||||
|
|
||||||
|
nav{ |
||||||
|
background: #cb997e; |
||||||
|
width: 100%; |
||||||
|
padding: 10px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.logo{ |
||||||
|
width: 100px; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
.user-pic{ |
||||||
|
width: 80px; |
||||||
|
border-radius: 50%; |
||||||
|
cursor: pointer; |
||||||
|
margin-left: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
nav ul{ |
||||||
|
width: 100%; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
nav ul li{ |
||||||
|
display: inline-block; |
||||||
|
list-style: none; |
||||||
|
margin: 10px 20px; |
||||||
|
} |
||||||
|
|
||||||
|
nav ul li a{ |
||||||
|
color:#ffffff; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap { |
||||||
|
position: absolute; |
||||||
|
top: 95px; |
||||||
|
right: 0; |
||||||
|
width: 320px; |
||||||
|
overflow: hidden; |
||||||
|
transition: display 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.hidden{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap.open-menu{ |
||||||
|
max-height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap{ |
||||||
|
background: white; |
||||||
|
margin: 10px; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.user-info{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
} |
||||||
|
.user-info h3{ |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.bigboy{ |
||||||
|
max-width: fit-content; |
||||||
|
max-height: 60px; |
||||||
|
|
||||||
|
} |
||||||
|
.user-info-img{ |
||||||
|
/* adjust image */ |
||||||
|
width: 60px; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu hr{ |
||||||
|
border: 0; |
||||||
|
height: 1px; |
||||||
|
width: 100%; |
||||||
|
background: #ccc; |
||||||
|
margin: 15px 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.sub-menu-link{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
text-decoration: none; |
||||||
|
color: #525252; |
||||||
|
margin: 12px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link p{ |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link img{ |
||||||
|
width: 40px; |
||||||
|
background: #e5e5e5; |
||||||
|
border-radius: 50%; |
||||||
|
padding: 8px; |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link span{ |
||||||
|
font-size: 22px; |
||||||
|
transition: transform 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link:hover span{ |
||||||
|
transform: translate(5px); |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link:hover p{ |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
h2{ |
||||||
|
margin-right: 10px; |
||||||
|
color: #4CAF50; |
||||||
|
} |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
<?php |
||||||
|
session_start(); |
||||||
|
if(!isset($_SESSION['user'])){ |
||||||
|
header("location:login.php"); |
||||||
|
exit; |
||||||
|
} |
||||||
|
$db_server = "localhost"; |
||||||
|
$db_user = "root"; |
||||||
|
$db_pass = ""; |
||||||
|
$db_name = "foodshare"; |
||||||
|
|
||||||
|
|
||||||
|
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||||
|
|
||||||
|
|
||||||
|
if (!$conn) { |
||||||
|
die("Connection failed: " . mysqli_connect_error()); |
||||||
|
} |
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') { |
||||||
|
|
||||||
|
$donor_name = $_POST['donorName']; |
||||||
|
$food_type = $_POST['foodType']; |
||||||
|
$quantity = $_POST['quantity']; |
||||||
|
$location = $_POST['location']; |
||||||
|
$expiration_date = $_POST['expirationDate']; |
||||||
|
|
||||||
|
|
||||||
|
$query = "INSERT INTO donations (donor_name, food_type, quantity, location, expiration_date) VALUES (?, ?, ?, ?, ?)"; |
||||||
|
$stmt = mysqli_prepare($conn, $query); |
||||||
|
|
||||||
|
if ($stmt) { |
||||||
|
mysqli_stmt_bind_param($stmt, "sssss", $donor_name, $food_type, $quantity, $location, $expiration_date); |
||||||
|
if (mysqli_stmt_execute($stmt)) { |
||||||
|
echo "Donation submitted successfully!"; |
||||||
|
} else { |
||||||
|
echo "Error executing query: " . mysqli_error($conn); |
||||||
|
} |
||||||
|
mysqli_stmt_close($stmt); |
||||||
|
} else { |
||||||
|
echo "Error preparing statement: " . mysqli_error($conn); |
||||||
|
} |
||||||
|
|
||||||
|
mysqli_close($conn); |
||||||
|
} |
||||||
|
?> |
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Donate Food</title> |
||||||
|
<link rel="stylesheet" href="donor.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="hero"> |
||||||
|
<nav> |
||||||
|
<img src="logo.png" alt="" class="logo"> |
||||||
|
<h2 class="ffg">FoodShare</h2> |
||||||
|
<!-- <ul> |
||||||
|
<li><a href="#">Contribution</a></li> |
||||||
|
<li><a href="#">Donate</a></li> |
||||||
|
</ul> --> |
||||||
|
<img src="anshuman.jpg" alt="" class="user-pic" onclick="toggleMenu()"> |
||||||
|
|
||||||
|
<div class="sub-menu-wrap hidden" id="subMenu"> |
||||||
|
<div class="sub-menu"> |
||||||
|
<div class="user-info"> |
||||||
|
<img src="anshuman.jpg" alt="user" class="bigboy"> |
||||||
|
<!-- extract name for donorhome --> |
||||||
|
<h3>Anshuman Bist</h3> |
||||||
|
</div> |
||||||
|
<hr> |
||||||
|
<a href="donorhome.php" class="sub-menu-link"> |
||||||
|
<img src="chat-history-line.png" alt=""> |
||||||
|
<p>Contribution History</p> |
||||||
|
<span>></span> |
||||||
|
</a> |
||||||
|
<a href="donor.php" class="sub-menu-link"> |
||||||
|
<img src="hand-heart-line.png" alt=""> |
||||||
|
<p>Donate</p> |
||||||
|
<span>></span> |
||||||
|
</a> |
||||||
|
<a href="home.html" class="sub-menu-link"> |
||||||
|
<img src="logout-box-r-line.png" alt=""> |
||||||
|
<p>Log Out</p> |
||||||
|
<span>></span> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="container"> |
||||||
|
<div class="header"> |
||||||
|
<h1><img src="logo.png" alt="logo" width="100" height="100" style="margin-right: 10px; border-radius: 100%;"></h1> |
||||||
|
</div> |
||||||
|
<h2>Food Donation Form</h2> |
||||||
|
<p>Please provide correct information.</p> |
||||||
|
<form action="donor.php" method="post"> |
||||||
|
<label for="donorName">Donor Name</label> |
||||||
|
<input type="text" id="donorName" name="donorName" placeholder="Enter your name" required> |
||||||
|
|
||||||
|
<label for="foodType">Food Type</label> |
||||||
|
<input type="text" id="foodType" name="foodType" placeholder="e.g., Bread, Vegetables" required> |
||||||
|
|
||||||
|
<label for="quantity">Quantity</label> |
||||||
|
<input type="text" id="quantity" name="quantity" placeholder="e.g., 10 kg" required> |
||||||
|
|
||||||
|
<label for="location">Location</label> |
||||||
|
<input type="text" id="location" name="location" placeholder="e.g., Downtown" required> |
||||||
|
|
||||||
|
<label for="expirationDate">Expiration Date</label> |
||||||
|
<input type="date" id="expirationDate" name="expirationDate" required> |
||||||
|
|
||||||
|
|
||||||
|
<button type="submit">Submit Donation</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
let subMenu = document.getElementById("subMenu"); |
||||||
|
|
||||||
|
const toggleMenu = () =>{ |
||||||
|
subMenu.classList.toggle("hidden") |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
body{ |
||||||
|
font-family: Arial,sans-serif; |
||||||
|
background-size: cover; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-color: beige; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
|
|
||||||
|
.container{ |
||||||
|
background-color: #faf4f5; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 15%; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-width: 500px; |
||||||
|
max-height: 450px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
header h1{ |
||||||
|
display: flex; |
||||||
|
text-align: center; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-section{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-box{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.profile{ |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
border-radius: 50%; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #ddd; |
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.profile img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-info .stat{ |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-info label{ |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.profile-info span{ |
||||||
|
font-size: 16px; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
.actions{ |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
button{ |
||||||
|
background-color: #28a745; |
||||||
|
color: #fff; |
||||||
|
border: none; |
||||||
|
padding: 10px 20px; |
||||||
|
margin: 5px 0; |
||||||
|
border-radius: 5px; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
|
||||||
|
button:hover{ |
||||||
|
background-color: #218838; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
session_start(); |
||||||
|
|
||||||
|
|
||||||
|
if (!isset($_SESSION['user'])) { |
||||||
|
header("Location: login.php"); |
||||||
|
exit; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
$donor_name = $_SESSION['user']['name']; |
||||||
|
|
||||||
|
|
||||||
|
$db_server = "localhost"; |
||||||
|
$db_user = "root"; |
||||||
|
$db_pass = ""; |
||||||
|
$db_name = "foodshare"; |
||||||
|
|
||||||
|
|
||||||
|
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||||
|
|
||||||
|
|
||||||
|
if (!$conn) { |
||||||
|
die("Connection failed: " . mysqli_connect_error()); |
||||||
|
} |
||||||
|
$query = "SELECT * FROM donations WHERE donor_name = ?"; |
||||||
|
$stmt = mysqli_prepare($conn, $query); |
||||||
|
mysqli_stmt_bind_param($stmt, "s", $donor_name); |
||||||
|
mysqli_stmt_execute($stmt); |
||||||
|
$result = mysqli_stmt_get_result($stmt); |
||||||
|
|
||||||
|
$query = "SELECT * FROM donations WHERE donor_name = ?"; |
||||||
|
$stmt = mysqli_prepare($conn, $query); |
||||||
|
mysqli_stmt_bind_param($stmt, "s", $donor_name); |
||||||
|
mysqli_stmt_execute($stmt); |
||||||
|
$result = mysqli_stmt_get_result($stmt); |
||||||
|
|
||||||
|
|
||||||
|
$donations = mysqli_fetch_all($result, MYSQLI_ASSOC); |
||||||
|
|
||||||
|
|
||||||
|
mysqli_stmt_close($stmt); |
||||||
|
mysqli_close($conn); |
||||||
|
?> |
||||||
|
|
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Donor Home</title> |
||||||
|
<link rel="stylesheet" href="donorhome.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<h1>Welcome, <span id="user-name"><?php echo htmlspecialchars($donor_name); ?></span>!</h1>
|
||||||
|
</header> |
||||||
|
|
||||||
|
<div class="profile-section"> |
||||||
|
<div class="profile-box"> |
||||||
|
<div class="profile"> |
||||||
|
<img id="profile-picture" src="anshuman.jpg" alt="Profile Picture"> |
||||||
|
</div> |
||||||
|
<div class="profile-info"> |
||||||
|
<div class="stat"> |
||||||
|
<label>Rating:</label> |
||||||
|
<span id="rating">Null</span> |
||||||
|
</div> |
||||||
|
<div class="stat"> |
||||||
|
<label>Contribution Points:Null</label> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="actions"> |
||||||
|
<button id="donate-food">Donate Food</button> |
||||||
|
<button id="toggle-history-btn" class="toggle-btn">Show Contribution History</button> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="history-section" id="history-section"> |
||||||
|
<h2>Contribution History</h2> |
||||||
|
<?php if (empty($donations)): ?> |
||||||
|
<p>Donated 10 kg of Vegetables from Anamnagar on 2025-01-12 22:25:37. Expires on 2025-01-20.</p> |
||||||
|
<?php else: ?> |
||||||
|
<ul id="history-list" class="history-list"> |
||||||
|
<?php foreach ($donations as $donation): ?> |
||||||
|
<li> |
||||||
|
Donated <?php echo htmlspecialchars($donation['quantity']); ?> of
|
||||||
|
<?php echo htmlspecialchars($donation['food_type']); ?> from
|
||||||
|
<?php echo htmlspecialchars($donation['location']); ?> on
|
||||||
|
<?php echo htmlspecialchars($donation['donation_date']); ?>
|
||||||
|
(Expires on <?php echo htmlspecialchars($donation['expiration_date']); ?>)
|
||||||
|
</li> |
||||||
|
<?php endforeach; ?> |
||||||
|
</ul> |
||||||
|
<?php endif; ?> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
const toggleHistoryBtn = document.getElementById('toggle-history-btn'); |
||||||
|
const historySection = document.getElementById('history-section'); |
||||||
|
|
||||||
|
toggleHistoryBtn.addEventListener('click', function() { |
||||||
|
|
||||||
|
if (historySection.style.display === 'none' || historySection.style.display === '') { |
||||||
|
historySection.style.display = 'block'; |
||||||
|
toggleHistoryBtn.textContent = 'Hide Contribution History'; |
||||||
|
} else { |
||||||
|
historySection.style.display = 'none'; |
||||||
|
toggleHistoryBtn.textContent = 'Show Contribution History'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("donate-food").addEventListener("click", function() { |
||||||
|
window.location.href = "donor.php"; |
||||||
|
}); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 410 B |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,193 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Document</title> |
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<!--header/ navigationb bar--> |
||||||
|
<header> |
||||||
|
<nav class="navbar section-content"> |
||||||
|
<a href="#" class="nav-logo"> |
||||||
|
<!-- <img src="logo.png" alt="" class="little-logo"> --> |
||||||
|
<h2 class="logo-text">FoodShare</h2> |
||||||
|
</a> |
||||||
|
<ul class="nav-menu"> |
||||||
|
<button id="menu-close-button" class="fas fa-times"></button> |
||||||
|
<li class="nav-item"> |
||||||
|
<a href="#" class="nav-link">Home</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a href="#about" class="nav-link">About</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a href="#team" class="nav-link">Team</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a href="#gallery" class="nav-link">Gallery</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a href="#contact" class="nav-link">Contact</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<!-- link login page --> |
||||||
|
<a href="login.php" class="nav-link">LogIn</a> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<!-- Sign Up page --> |
||||||
|
<a href="signup.php" class="nav-link">SignUp</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<button id="menu-open-button" class="fas fa-bars"></button> |
||||||
|
|
||||||
|
</nav> |
||||||
|
</header> |
||||||
|
|
||||||
|
<main> |
||||||
|
<!--home--> |
||||||
|
<section class="home-section" > |
||||||
|
<div class="section-content"> |
||||||
|
<div class="home-details"> |
||||||
|
<h2 class="title">Welcome To</h2> |
||||||
|
<h2 class="my">FoodShare</h2> |
||||||
|
|
||||||
|
<p class="description" style="text-align: justify;">Welcome to FoodShare, where sharing is caring! At FoodShare, we believe in creating a community that connects people through the love of food. Whether you'r donating the surplus food or searching a helping hand, we're here to make it simple and impactful. Join us in making a impactful difference in the community. Together we can make a difference!</p> |
||||||
|
<div class="buttons"> |
||||||
|
<a href="signup.php" class="button order now">Join </a> |
||||||
|
<a href="#contact" class="button contact us">Contact Us </a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="home-image-wrapper"> |
||||||
|
<img src="home-background.jpg" alt="" class="home-image"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--about--> |
||||||
|
<section class="about-section" id="about"> |
||||||
|
<div class="section-content"> |
||||||
|
<div class="about-image-wrapper"> |
||||||
|
<img src="logo-about.png" alt="" class="about-img"> |
||||||
|
</div> |
||||||
|
<div class="about-details"> |
||||||
|
<h2 class="section-title">About Us</h2> |
||||||
|
<p class="text">Foodshare is an online platform that connects food donors with recipients in real time. We are non-profit organization with the aim of making significant impact in the community.</p> |
||||||
|
<div class="social-link-list"> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-twitter"></i></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--team--> |
||||||
|
<section class="team-section" id="team"> |
||||||
|
<h2 class="section-title">Team</h2> |
||||||
|
<div class="section-content"> |
||||||
|
<div class="slider-container"> |
||||||
|
<div class="slider-wrapper"> |
||||||
|
<ul class="teams-list"> |
||||||
|
<li class="teams"> |
||||||
|
<img src="anshuman.jpg" alt="User" class="user-image"> |
||||||
|
<h3 class="name">Anshuman Bist</h3> |
||||||
|
|
||||||
|
</li> |
||||||
|
<li class="teams"> |
||||||
|
<img src="pradip.jpg" alt="User" class="user-image"> |
||||||
|
<h3 class="name">Pradip Rawal</h3> |
||||||
|
|
||||||
|
</li> |
||||||
|
<li class="teams"> |
||||||
|
<img src="user-image.png" alt="User" class="user-image"> |
||||||
|
<h3 class="name">Prashant Joshi</h3> |
||||||
|
|
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- Gallery --> |
||||||
|
<section class="gallery-section" id="gallery"> |
||||||
|
<h2 class="section-title">Gallery</h2> |
||||||
|
<div class="section-content"> |
||||||
|
<ul class="gallery-list"> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="Anath1.png" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="anath-gang.png" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="i1.jpg" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="i2.jpg" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="i3.jpg" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
<li class="gallery-items"> |
||||||
|
<img src="i4.jpg" alt="Gallery" class="gallery-image"> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
</section> |
||||||
|
<!-- contact --> |
||||||
|
<section class="contact-section" id="contact"> |
||||||
|
<h2 class="section-title">Contact Us</h2> |
||||||
|
<div class="section-content"> |
||||||
|
<ul class="contact-info-list"> |
||||||
|
<li class="contact-info"> |
||||||
|
<i class="fa-solid fa-location-crosshairs"></i> |
||||||
|
<p>Maiti Devi Marg, Kathmandu 44600</p> |
||||||
|
</li> |
||||||
|
<li class="contact-info"> |
||||||
|
<i class="fa-solid fa-envelope"></i> |
||||||
|
<p>info@coffeeshopwebsite.com</p> |
||||||
|
</li> |
||||||
|
<li class="contact-info"> |
||||||
|
<i class="fa-solid fa-phone"></i> |
||||||
|
<p>+977 9745808586</p> |
||||||
|
</li> |
||||||
|
<li class="contact-info"> |
||||||
|
<i class="fa-solid fa-clock"></i> |
||||||
|
<p>Monday - Friday; 9:00 AM - 5:00 PM </p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<form action="#" class="contact-form"> |
||||||
|
<input type="text" placeholder="Your name" class="form-input" required> |
||||||
|
<input type="email" placeholder="Your email" class="form-input" required> |
||||||
|
<textarea placeholder="Your message" class="form-input" required> </textarea> |
||||||
|
<button class="submit-button">Submit</button> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- foot --> |
||||||
|
<footer class="footer-section"> |
||||||
|
<div class="section-content"> |
||||||
|
<p class="copyright-text">@ 2025 FoodShare</p> |
||||||
|
<div class="social-link-list"> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a> |
||||||
|
<a href="#" class="social-link"><i class="fa-brands fa-twitter"></i></a> |
||||||
|
|
||||||
|
</div> |
||||||
|
<p class="policy-text"> |
||||||
|
<a href="#" class="policy-link">Privacy Policy</a> |
||||||
|
<span class="separator">•</span> |
||||||
|
<a href="#" class="policy-link">Health Policy</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
</main> |
||||||
|
|
||||||
|
<script src="script.js"></script> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||||
|
|
||||||
|
|
||||||
|
*{ |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
font-family: "Poppins",sans-serif; |
||||||
|
background-color: beige; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
height: 100vh; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.container{ |
||||||
|
background-color: #faf4f5; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-width: 450px; |
||||||
|
max-height: 450px; |
||||||
|
} |
||||||
|
|
||||||
|
h1{ |
||||||
|
text-align: center; |
||||||
|
font-size: 1.8em; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
label{ |
||||||
|
font-weight: bold; |
||||||
|
display: block; |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
.abc{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
input,select,button{ |
||||||
|
width: 100%; |
||||||
|
padding: 12px; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input:focus, select:focus{ |
||||||
|
outline: none; |
||||||
|
border-color: #4caf50; |
||||||
|
box-shadow: 0 0 5px #218838(0,123,255,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
button{ |
||||||
|
text-transform: uppercase; |
||||||
|
margin-top: 10px; |
||||||
|
background-color: #55AD9B; |
||||||
|
color: white; |
||||||
|
border:none; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 1.1em; |
||||||
|
transition: background-color 0.3s ease; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
button:hover{ |
||||||
|
background-color: #218838; |
||||||
|
} |
||||||
|
|
||||||
|
.logo{ |
||||||
|
height: 70px; |
||||||
|
width: 70px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content:space-between ; |
||||||
|
} |
||||||
|
.def{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.iou{ |
||||||
|
margin-top: 10px; |
||||||
|
display: flex; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
$db_server = "localhost"; |
||||||
|
$db_user = "root"; |
||||||
|
$db_pass = ""; |
||||||
|
$db_name = "foodshare"; |
||||||
|
|
||||||
|
|
||||||
|
$conn = mysqli_connect($db_server, $db_user, $db_pass, $db_name); |
||||||
|
|
||||||
|
|
||||||
|
if (!$conn) { |
||||||
|
die("Connection failed: " . mysqli_connect_error()); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
session_start(); |
||||||
|
|
||||||
|
$error_message = ""; |
||||||
|
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') { |
||||||
|
$email = $_POST['email']; |
||||||
|
$password = $_POST['password']; |
||||||
|
|
||||||
|
|
||||||
|
$query = "SELECT *, 'donor' AS user_type FROM donor WHERE email = ? AND password = ? |
||||||
|
UNION |
||||||
|
SELECT *, 'receiver' AS user_type FROM receiver WHERE email = ? AND password = ?"; |
||||||
|
$stmt = mysqli_prepare($conn, $query); |
||||||
|
|
||||||
|
if ($stmt) { |
||||||
|
|
||||||
|
mysqli_stmt_bind_param($stmt, "ssss", $email, $password, $email, $password); |
||||||
|
mysqli_stmt_execute($stmt); |
||||||
|
$result = mysqli_stmt_get_result($stmt); |
||||||
|
|
||||||
|
if ($result && mysqli_num_rows($result) > 0) { |
||||||
|
$user = mysqli_fetch_assoc($result); |
||||||
|
|
||||||
|
|
||||||
|
$_SESSION['user'] = [ |
||||||
|
'name' => $user['name'], |
||||||
|
'email' => $user['email'], |
||||||
|
'user_type' => $user['user_type'], |
||||||
|
]; |
||||||
|
|
||||||
|
if ($user['user_type'] === 'donor') { |
||||||
|
header("Location: donorhome.php"); |
||||||
|
} elseif ($user['user_type'] === 'receiver') { |
||||||
|
header("Location: receiver.php"); |
||||||
|
} |
||||||
|
exit; |
||||||
|
} else { |
||||||
|
$error_message = "Invalid email or password."; |
||||||
|
} |
||||||
|
|
||||||
|
mysqli_stmt_close($stmt); |
||||||
|
} else { |
||||||
|
$error_message = "Database error: " . mysqli_error($conn); |
||||||
|
} |
||||||
|
|
||||||
|
mysqli_close($conn); |
||||||
|
} |
||||||
|
?> |
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Login </title> |
||||||
|
<link rel="stylesheet" href="login.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<img src="logo.png" alt="" class="logo"> |
||||||
|
<h1>Login</h1> |
||||||
|
|
||||||
|
|
||||||
|
<?php if (!empty($error_message)): ?> |
||||||
|
<div class="error-message"> |
||||||
|
<p><?php echo htmlspecialchars($error_message); ?></p>
|
||||||
|
</div> |
||||||
|
<?php endif; ?> |
||||||
|
|
||||||
|
<form action="login.php" method="post" id="login-form"> |
||||||
|
<label for="email">Email:</label> |
||||||
|
<input type="email" id="email" name="email" placeholder="Enter your email" required> |
||||||
|
|
||||||
|
<label class="iou" for="password">Password:</label> |
||||||
|
<input type="password" id="password" name="password" placeholder="Enter your password" required> |
||||||
|
|
||||||
|
<button type="submit">Login</button> |
||||||
|
<p>Don't have an account? <a class="def" href="signup.php">Sign Up</a></p> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 899 KiB |
|
After Width: | Height: | Size: 238 B |
|
After Width: | Height: | Size: 47 KiB |
@ -0,0 +1,267 @@ |
|||||||
|
*{ |
||||||
|
margin:0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
font-family: 'Poppins', sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
font-family: Arial,sans-serif; |
||||||
|
background-color: beige; |
||||||
|
color: #333; |
||||||
|
line-height: 1.6; |
||||||
|
} |
||||||
|
|
||||||
|
/* a{ |
||||||
|
text-decoration: none; |
||||||
|
color: #4CAF50; |
||||||
|
} */ |
||||||
|
|
||||||
|
header{ |
||||||
|
background-image: url('logo.png'); |
||||||
|
color: white; |
||||||
|
text-align: center; |
||||||
|
padding: 60px 20px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.header p{ |
||||||
|
font-size: 1.2em; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
max-width: 700px; |
||||||
|
margin-top: 30px; |
||||||
|
margin: 30px auto; |
||||||
|
padding: 20px; |
||||||
|
background: #faf4f5; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
||||||
|
} |
||||||
|
|
||||||
|
/* .container h2{ |
||||||
|
font-size: 10em; |
||||||
|
color: black; |
||||||
|
border-bottom: 2px ; |
||||||
|
padding-bottom: 5px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} */ |
||||||
|
|
||||||
|
form{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
label{ |
||||||
|
font-weight: bold; |
||||||
|
display: block; |
||||||
|
margin-bottom: 8px; |
||||||
|
color: #555; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
input,select,button{ |
||||||
|
width: 100%; |
||||||
|
padding: 12px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input:focus, select:focus{ |
||||||
|
outline: none; |
||||||
|
border-color: #4CAF50; |
||||||
|
box-shadow: 0 0 5px #4CAF50(0, 123,255,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
button{ |
||||||
|
background-color: #4CAF50; |
||||||
|
color: white; |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 1.1em; |
||||||
|
transition: background-color 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
button:hover{ |
||||||
|
background-color: #4CAF50; |
||||||
|
} |
||||||
|
|
||||||
|
.matches{ |
||||||
|
background: #f9f9f9; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.match-item{ |
||||||
|
padding: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border: 1px solid #cce5ff; |
||||||
|
background-color: #e6f0ff; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
color: #333; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.match-item:hover{ |
||||||
|
background-color: #d9eaff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.footer { |
||||||
|
text-align: center; |
||||||
|
padding: 15px 20px; |
||||||
|
background: #4CAF50; |
||||||
|
color: white; |
||||||
|
margin-top: 30px; |
||||||
|
font-size: 0.9em; |
||||||
|
} |
||||||
|
|
||||||
|
.popup{ |
||||||
|
position: fixed; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
background-color: #ffffff; |
||||||
|
border: 1px solid #ccc; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 5px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
p{ |
||||||
|
margin-top: 5px; |
||||||
|
margin-bottom: 5px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/* navigation-bar */ |
||||||
|
.hero{ |
||||||
|
width: 100%; |
||||||
|
min-height: 30vh; |
||||||
|
background: beige; |
||||||
|
color: #525252; |
||||||
|
} |
||||||
|
|
||||||
|
nav{ |
||||||
|
background: #cb997e; |
||||||
|
width: 100%; |
||||||
|
padding: 10px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.logo{ |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
.user-pic{ |
||||||
|
width: 60px; |
||||||
|
border-radius: 50%; |
||||||
|
cursor: pointer; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
nav ul{ |
||||||
|
width: 100%; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
nav ul li{ |
||||||
|
display: inline-block; |
||||||
|
list-style: none; |
||||||
|
margin: 10px 20px; |
||||||
|
} |
||||||
|
|
||||||
|
nav ul li a{ |
||||||
|
color:#ffffff; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap{ |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
right: 10%; |
||||||
|
width: 320px; |
||||||
|
max-height: 0px; |
||||||
|
overflow: hidden; |
||||||
|
transition: max-height 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap.open-menu{ |
||||||
|
max-height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-wrap{ |
||||||
|
background: white; |
||||||
|
margin: 10px; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.user-info{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
} |
||||||
|
.user-info h3{ |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.bigboy{ |
||||||
|
max-width: fit-content; |
||||||
|
max-height: 60px; |
||||||
|
margin-left: 20px; |
||||||
|
|
||||||
|
} |
||||||
|
.user-info-img{ |
||||||
|
/* adjust image */ |
||||||
|
width: 60px; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu hr{ |
||||||
|
border: 0; |
||||||
|
height: 1px; |
||||||
|
width: 100%; |
||||||
|
background: #ccc; |
||||||
|
margin: 15px 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.sub-menu-link{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
text-decoration: none; |
||||||
|
color: #525252; |
||||||
|
margin: 12px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link p{ |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link img{ |
||||||
|
width: 40px; |
||||||
|
background: #e5e5e5; |
||||||
|
border-radius: 50%; |
||||||
|
padding: 8px; |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link span{ |
||||||
|
font-size: 22px; |
||||||
|
transition: transform o.5s; |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link:hover span{ |
||||||
|
transform: translate(5px); |
||||||
|
} |
||||||
|
|
||||||
|
.sub-menu-link:hover p{ |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
<?php |
||||||
|
$servername = "localhost"; |
||||||
|
$username = "root"; |
||||||
|
$password = ""; |
||||||
|
$dbname = "foodshare"; |
||||||
|
|
||||||
|
$conn = new mysqli($servername, $username, $password, $dbname); |
||||||
|
|
||||||
|
if ($conn->connect_error) { |
||||||
|
die("Connection failed: " . $conn->connect_error); |
||||||
|
} |
||||||
|
|
||||||
|
$message = ""; |
||||||
|
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] == "POST") { |
||||||
|
$name = $conn->real_escape_string($_POST['recipientName']); |
||||||
|
$location = $conn->real_escape_string($_POST['recipientLocation']); |
||||||
|
$foodNeeds = $conn->real_escape_string($_POST['foodNeeds']); |
||||||
|
|
||||||
|
$sql = "INSERT INTO recipient (name, location, food_needs) VALUES ('$name', '$location', '$foodNeeds')"; |
||||||
|
|
||||||
|
if ($conn->query($sql) === TRUE) { |
||||||
|
$message = "Your request has been matched. Food type: Vegetables , Pickup Location: Anaamnagar "; |
||||||
|
} else { |
||||||
|
$message = "Error: " . $sql . "<br>" . $conn->error; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$conn->close(); |
||||||
|
?> |
||||||
|
|
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Receiver</title> |
||||||
|
<link rel="stylesheet" href="receiver.css"> |
||||||
|
<script> |
||||||
|
// Display the message as a popup if it's set |
||||||
|
function showMessage(message) { |
||||||
|
if (message) { |
||||||
|
alert(message); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
</head> |
||||||
|
<body onload="showMessage('<?= htmlspecialchars($message) ?>')">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container"> |
||||||
|
<img src="logo.png" alt="" class="logo"> |
||||||
|
<h2>Request Your Needs</h2> |
||||||
|
<form method="POST" action=""> |
||||||
|
<label for="recipientName">Recipient Name</label> |
||||||
|
<input type="text" id="recipientName" name="recipientName" placeholder="Enter organization name" required> |
||||||
|
|
||||||
|
<label for="recipientLocation">Location</label> |
||||||
|
<input type="text" id="recipientLocation" name="recipientLocation" placeholder="e.g., kathmandu" required> |
||||||
|
|
||||||
|
<label for="foodNeeds">Food Needs</label> |
||||||
|
<input type="text" id="foodNeeds" name="foodNeeds" placeholder="e.g., Any thing, Vegetables" required> |
||||||
|
|
||||||
|
<button type="submit">Submit Needs</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
const menuOpenButton = document.querySelector("#menu-open-button"); |
||||||
|
const menuCloseButton = document.querySelector("#menu-close-button"); |
||||||
|
|
||||||
|
menuOpenButton.addEventListener("click", () =>{ |
||||||
|
document.body.classList.toggle("show-mobile-menu"); |
||||||
|
}); |
||||||
|
|
||||||
|
menuCloseButton.addEventListener("click",() => menuOpenButton.click()); |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||||
|
|
||||||
|
|
||||||
|
*{ |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
font-family: "Poppins",sans-serif; |
||||||
|
background-color: beige; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
height: 100vh; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.container{ |
||||||
|
background-color: #faf4f5; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-width: 450px; |
||||||
|
max-height: 650px; |
||||||
|
} |
||||||
|
|
||||||
|
h1{ |
||||||
|
text-align: center; |
||||||
|
font-size: 1.8em; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
label{ |
||||||
|
font-weight: bold; |
||||||
|
display: block; |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
.abc{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
input,select,button{ |
||||||
|
width: 100%; |
||||||
|
padding: 12px; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
input:focus, select:focus{ |
||||||
|
outline: none; |
||||||
|
border-color: #4caf50; |
||||||
|
box-shadow: 0 0 5px #218838(0,123,255,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
button{ |
||||||
|
text-transform: uppercase; |
||||||
|
margin-top: 10px; |
||||||
|
background-color: #55AD9B; |
||||||
|
color: white; |
||||||
|
border:none; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 1.1em; |
||||||
|
transition: background-color 0.3s ease; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
button:hover{ |
||||||
|
background-color: #218838; |
||||||
|
} |
||||||
|
|
||||||
|
.logo{ |
||||||
|
height: 70px; |
||||||
|
width: 70px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content:space-between ; |
||||||
|
} |
||||||
|
.def{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.iou{ |
||||||
|
margin-top: 10px; |
||||||
|
display: flex; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.full, .email, .pass{ |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
document.addEventListener("DOMContentLoaded",()=>{ |
||||||
|
const signupForm=document.getElementById("sign-form"); |
||||||
|
signupForm.addEventListener("submit",(event)=>{ |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
const userType=document.getElementById("user-type").value; |
||||||
|
const name=document.getElementById("name").value; |
||||||
|
const email=document.getElementById("email").value; |
||||||
|
const password=document.getElementById("password").value; |
||||||
|
|
||||||
|
if(!name|| !email|| !password){ |
||||||
|
alert("please fill in the field."); |
||||||
|
return; |
||||||
|
} |
||||||
|
signupForm.onsubmit(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
<?php |
||||||
|
$db_server="localhost"; |
||||||
|
$db_user="root"; |
||||||
|
$db_pass=""; |
||||||
|
$db_name="foodshare"; |
||||||
|
|
||||||
|
$conn=mysqli_connect($db_server,$db_user,$db_pass,$db_name); |
||||||
|
if(!$conn){ |
||||||
|
die("Connection failed:".mysqli_connect_error()); |
||||||
|
} |
||||||
|
if($_SERVER['REQUEST_METHOD']==='POST'){ |
||||||
|
$user_type=$_POST['user_type']; |
||||||
|
$name=$_POST['name']; |
||||||
|
$email=$_POST['email']; |
||||||
|
$password=$_POST['password']; |
||||||
|
|
||||||
|
if($user_type=='donor'){ |
||||||
|
$table='donor'; |
||||||
|
}elseif ($user_type=='receiver') { |
||||||
|
$table='receiver'; |
||||||
|
}else{ |
||||||
|
die("invalid user type selected."); |
||||||
|
} |
||||||
|
$query="INSERT INTO $table(name,email,password) VALUES(?,?,?)"; |
||||||
|
$stmt=mysqli_prepare($conn,$query); |
||||||
|
if($stmt){ |
||||||
|
mysqli_stmt_bind_param($stmt,"sss",$name,$email,$password); |
||||||
|
if(mysqli_stmt_execute($stmt)){ |
||||||
|
header("Location:login.php"); |
||||||
|
exit; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
?> |
||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<link rel="stylesheet" href="signup.css"> |
||||||
|
<title>Signup page</title> |
||||||
|
|
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<img src="logo.png" alt="" class="logo"> |
||||||
|
<h1> Sign Up </h1> |
||||||
|
<form action="signup.php" method="post" id="signup-form"> |
||||||
|
<label for ="user-type">Select Your Role:</label> |
||||||
|
<select id="user-type" name="user_type" required> |
||||||
|
<option value="donor">Donor</option> |
||||||
|
<option value="receiver">Receiver</option> |
||||||
|
</select> |
||||||
|
<label class="full" for="name">Full Name</label> |
||||||
|
<input type="text" id="name" name="name" placeholder="Enter your full name"required> |
||||||
|
|
||||||
|
<label class="email" for="email">Email</label> |
||||||
|
<input type="email" id="email" name="email" placeholder="Enter your email"required> |
||||||
|
|
||||||
|
<label class="pass" for="password">Password</label> |
||||||
|
<input type="password" id="password" name="password" placeholder="Sign password"required><br><br> |
||||||
|
|
||||||
|
<button type="submit">Sign Up</button><br> |
||||||
|
<p class="iou"> Already have an account?<a href="login.php">Login</a></p> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<script src="signup.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,482 @@ |
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); |
||||||
|
*{ |
||||||
|
font-family: "Poppins",sans-serif; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
:root { |
||||||
|
/* Colors */ |
||||||
|
--white-color: #fff; |
||||||
|
--dark-color: #252525; |
||||||
|
--primary-color: #3b141c; |
||||||
|
--secondary-color: #f3961c; |
||||||
|
--light-pink-color: #faf4f5; |
||||||
|
--medium-gray-color: #ccc; |
||||||
|
--beige-color: #f5f5dc; |
||||||
|
--Ivory-color:#FFFFF0; |
||||||
|
--light-green-color:#90EE90; |
||||||
|
--one-color:#E5D0AC; |
||||||
|
--two-color:#FEF9E1; |
||||||
|
|
||||||
|
|
||||||
|
/* Font size */ |
||||||
|
--font-size-s: 0.9rem; |
||||||
|
--font-size-n: 1rem; |
||||||
|
--font-size-m: 1.12rem; |
||||||
|
--font-size-l: 1.5rem; |
||||||
|
--font-size-xl: 2rem; |
||||||
|
--font-size-xxl: 2.3rem; |
||||||
|
|
||||||
|
/* Font weight */ |
||||||
|
--font-weight-normal: 400; |
||||||
|
--font-weight-medium: 500; |
||||||
|
--font-weight-semibold: 600; |
||||||
|
--font-weight-bold: 700; |
||||||
|
|
||||||
|
/* Border radius */ |
||||||
|
--border-radius-s: 8px; |
||||||
|
--border-radius-m: 30px; |
||||||
|
--border-radius-circle: 50%; |
||||||
|
|
||||||
|
/* Site max width */ |
||||||
|
--site-max-width: 1300px; |
||||||
|
} |
||||||
|
/* style for the whole site*/ |
||||||
|
ul{ |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
a{ |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
button{ |
||||||
|
cursor:pointer; |
||||||
|
border: none; |
||||||
|
background: none; |
||||||
|
} |
||||||
|
|
||||||
|
img{ |
||||||
|
width:100%; |
||||||
|
} |
||||||
|
.section-content{ |
||||||
|
margin: 0 auto; |
||||||
|
padding: 0 15px; |
||||||
|
max-width: var(--site-max-width); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.section-title{ |
||||||
|
text-align: center; |
||||||
|
padding: 60px 0 100px; |
||||||
|
text-transform: uppercase; |
||||||
|
font-size: var(--font-size-xl); |
||||||
|
} |
||||||
|
|
||||||
|
.section-title::after{ |
||||||
|
content: ""; |
||||||
|
width: 80px; |
||||||
|
height: 5px; |
||||||
|
display: block; |
||||||
|
margin: 10px auto 0; |
||||||
|
border-radius: var(--border-radius-s); |
||||||
|
background: var(--secondary-color); |
||||||
|
} |
||||||
|
|
||||||
|
/*Navigation bar*/ |
||||||
|
header{ |
||||||
|
position: fixed; |
||||||
|
width: 100%; |
||||||
|
z-index: 5; |
||||||
|
background: #cb997e; |
||||||
|
} |
||||||
|
header .navbar{ |
||||||
|
display: flex; |
||||||
|
padding: 20px; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
} |
||||||
|
.navbar .nav-logo .logo-text{ |
||||||
|
color: var(--white-color); |
||||||
|
font-size: var(--font-size-xl); |
||||||
|
font-weight: var(--font-weight-semibold); |
||||||
|
} |
||||||
|
|
||||||
|
.navbar .nav-menu{ |
||||||
|
display: flex; |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar .nav-menu .nav-link{ |
||||||
|
padding: 10px 18px; |
||||||
|
color: var(--white-color); |
||||||
|
font-size: var(--font-size-m); |
||||||
|
border-radius: var(--border-radius-m); |
||||||
|
transition: 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.navbar .nav-menu .nav-link:hover { |
||||||
|
background: var(--secondary-color); |
||||||
|
color: var(--primary-color); |
||||||
|
} |
||||||
|
|
||||||
|
.navbar :where(#menu-close-button, #menu-open-button) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* .little-logo{ |
||||||
|
height: 40px; |
||||||
|
width: 40px; |
||||||
|
} */ |
||||||
|
|
||||||
|
/*background ko color*/ |
||||||
|
.home-section{ |
||||||
|
background: #ddbea9; |
||||||
|
} |
||||||
|
.home-section .section-content{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
min-height: 100vh; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.home-section .home-details .title{ |
||||||
|
font-size: var(--font-size-xl); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.home-section .home-details .subtitle{ |
||||||
|
margin-top: 8px; |
||||||
|
max-width: 70%; |
||||||
|
font-size: var(--font-size-xl); |
||||||
|
font-weight: var(--font-weight-semibold); |
||||||
|
} |
||||||
|
.home-section .home-details .description{ |
||||||
|
font-size: var(--font-size-m); |
||||||
|
max-width: 70%; |
||||||
|
margin: 24px 0 40px; |
||||||
|
} |
||||||
|
.home-section .home-details .buttons{ |
||||||
|
display: flex; |
||||||
|
gap: 23px; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
.home-section .home-details .button{ |
||||||
|
padding: 10px 26px; |
||||||
|
border: 2px solid transparent; |
||||||
|
color: var(--primary-color); |
||||||
|
border-radius: var(--border-radius-m); |
||||||
|
background: var(--secondary-color); |
||||||
|
font-weight: var(--font-weight-medium); |
||||||
|
transition: 0.3s ease; |
||||||
|
} |
||||||
|
.home-section .home-details .button:hover,.home-section .home-details .contact{ |
||||||
|
color: white; |
||||||
|
border-color: white; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
.home-section .home-details .contact:hover{ |
||||||
|
color: var(--primary-color); |
||||||
|
border-color: var(--secondary-color); |
||||||
|
background: var(--secondary-color); |
||||||
|
} |
||||||
|
|
||||||
|
.home-section .home-image-wrapper{ |
||||||
|
max-width: 500px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
/* need assistance */ |
||||||
|
/* |
||||||
|
img.little-logo{ |
||||||
|
height: 60px; |
||||||
|
width: 80px; |
||||||
|
object-fit:contain ; |
||||||
|
left: -2%; |
||||||
|
} */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*about-part*/ |
||||||
|
.about-section{ |
||||||
|
padding: 120px 0; |
||||||
|
background: var(--light-pink-color); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.about-section .section-content{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .about-image-wrapper .about-image{ |
||||||
|
width: 250px; |
||||||
|
height: 250px; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: var(--border-radius-circle); |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .about-details .section-title{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .about-details{ |
||||||
|
max-width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.about-section .about-details .text{ |
||||||
|
line-height: 30px; |
||||||
|
margin: 50px 0 30px; |
||||||
|
text-align: center; |
||||||
|
font-size: var(--font-size-m); |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .about-details .social-link-list{ |
||||||
|
display: flex; |
||||||
|
gap: 25px; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .social-link-list .social-link{ |
||||||
|
color: var(--primary-color); |
||||||
|
font-size: var(--font-size-l); |
||||||
|
transition: 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .social-link-list .social-link:hover{ |
||||||
|
color: var(--secondary-color); |
||||||
|
} |
||||||
|
|
||||||
|
/*team-part*/ |
||||||
|
.team-section{ |
||||||
|
padding: 50px 0 100px; |
||||||
|
background: var(--light-pink-color); |
||||||
|
} |
||||||
|
|
||||||
|
.team-section .teams{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding: 35px; |
||||||
|
text-align: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.team-section .teams .user-image{ |
||||||
|
width: 180px; |
||||||
|
height: 180px; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: var(--border-radius-circle); |
||||||
|
margin-bottom: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.team-section .teams .name{ |
||||||
|
margin-bottom: 16px; |
||||||
|
font-size: var(--font-size-m); |
||||||
|
} |
||||||
|
|
||||||
|
.team-section .teams .role{ |
||||||
|
line-height: 25px; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
ul.teams-list { |
||||||
|
display: flex |
||||||
|
; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* gallery */ |
||||||
|
.gallery-section .gallery-list { |
||||||
|
padding: 50px 0 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.gallery-section .gallery-list{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.gallery-section .gallery-list .gallery-items{ |
||||||
|
overflow: hidden; |
||||||
|
border-radius: var(--border-radius-s); |
||||||
|
width: calc(100% / 3 - 32px); |
||||||
|
} |
||||||
|
|
||||||
|
.gallery-section .gallery-items .gallery-image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
cursor: zoom-in; |
||||||
|
transition: 0.3s ease; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.gallery-section .gallery-items:hover .gallery-image{ |
||||||
|
transform: scale(1.3); |
||||||
|
} |
||||||
|
|
||||||
|
/* Contact us part */ |
||||||
|
.contact-section{ |
||||||
|
background: var(--light-pink-color); |
||||||
|
padding: 50px 0 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.contact-section .section-content{ |
||||||
|
display: flex; |
||||||
|
gap: 48px; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.contact-section .contact-info-list .contact-info{ |
||||||
|
display: flex; |
||||||
|
gap: 20px; |
||||||
|
margin: 20px 0; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.contact-section .contact-info-list .contact-info i{ |
||||||
|
font-size: var(--font-size-m); |
||||||
|
} |
||||||
|
.contact-section .contact-form .form-input{ |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
padding: 0 12px; |
||||||
|
outline: none; |
||||||
|
margin-bottom: 16px; |
||||||
|
background: white; |
||||||
|
border-radius: var(--border-radius-s); |
||||||
|
border: 1px solid var(--medium-gray-color); |
||||||
|
} |
||||||
|
|
||||||
|
.contact-section .contact-form .form-input:focus{ |
||||||
|
border-color: #ddbea9; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.contact-section .contact-form textarea .form-inpu{ |
||||||
|
height: 100px; |
||||||
|
padding: 12px; |
||||||
|
resize: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
.contact-section .contact-form .submit-button{ |
||||||
|
padding: 10px 26px; |
||||||
|
color: white; |
||||||
|
background: #cb997e; |
||||||
|
border-radius: var(--border-radius-m); |
||||||
|
font-weight: var(--font-weight-medium); |
||||||
|
font-size: var(--font-size-m); |
||||||
|
border: 1px solid #cb997e; |
||||||
|
transition: o.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.contact-section .contact-form .submit-button:hover{ |
||||||
|
color: #cb997e; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* foot part */ |
||||||
|
.footer-section{ |
||||||
|
padding: 20px 0; |
||||||
|
background: var(--dark-color); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section .section-content{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section :where(.copyright-text, .social-link, .policy-link){ |
||||||
|
color: var(--white-color); |
||||||
|
transition: 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section .social-link-list { |
||||||
|
display: flex; |
||||||
|
gap: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section .social-link-list .social-link{ |
||||||
|
font-size: var(--font-size-l); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section .social-link-list .social-link:hover, .footer-section .policy-text .policy-link:hover{ |
||||||
|
color: #ddbea9; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-section .policy-text .separator{ |
||||||
|
margin: 0 5px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px){ |
||||||
|
.root { |
||||||
|
--font-size-m: 1rem; |
||||||
|
--font-size-l: 1.3rem; |
||||||
|
--font-size-xl: 1.5rem; |
||||||
|
--font-size-xxl: 1.8rem; |
||||||
|
} |
||||||
|
.navbar :where(#menu-close-button, #menu-open-button){ |
||||||
|
display: block; |
||||||
|
font-size: var(--font-size-l); |
||||||
|
} |
||||||
|
.navbar #menu-close-button{ |
||||||
|
position: absolute; |
||||||
|
right: 30px; |
||||||
|
top: 30px; |
||||||
|
} |
||||||
|
.navbar #menu-open-button{ |
||||||
|
color: var(--white-color); |
||||||
|
} |
||||||
|
.navbar .nav-menu{ |
||||||
|
display: block; |
||||||
|
position: fixed; |
||||||
|
left: -300px; |
||||||
|
top: 0; |
||||||
|
width: 300px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
padding-top: 100px; |
||||||
|
background: var(--white-color); |
||||||
|
transition: left 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
body.show-mobile-menu .navbar .nav-menu{ |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.navbar .nav-menu .nav-link{ |
||||||
|
color: var(--dark-color); |
||||||
|
display: block; |
||||||
|
margin-top: 17px; |
||||||
|
font-size: var(--font-size-l); |
||||||
|
} |
||||||
|
.about-section .section-content{ |
||||||
|
flex-direction: column-reverse; |
||||||
|
gap: 70px; |
||||||
|
} |
||||||
|
|
||||||
|
.about-section .about-image-wrapper .about-image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-width: 250px; |
||||||
|
aspect-ratio: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
After Width: | Height: | Size: 550 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in new issue