commit bbccf3392cd6ab073491f1269eb50ab85cfad686 Author: Prashant_joshi Date: Sun Jan 12 22:55:42 2025 +0545 first commit diff --git a/Anath1.png b/Anath1.png new file mode 100644 index 0000000..bb818e5 Binary files /dev/null and b/Anath1.png differ diff --git a/anath-gang.png b/anath-gang.png new file mode 100644 index 0000000..07037cf Binary files /dev/null and b/anath-gang.png differ diff --git a/anshuman.jpg b/anshuman.jpg new file mode 100644 index 0000000..addb963 Binary files /dev/null and b/anshuman.jpg differ diff --git a/chat-history-line.png b/chat-history-line.png new file mode 100644 index 0000000..a09dc4c Binary files /dev/null and b/chat-history-line.png differ diff --git a/donor.css b/donor.css new file mode 100644 index 0000000..7f02801 --- /dev/null +++ b/donor.css @@ -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; +} \ No newline at end of file diff --git a/donor.php b/donor.php new file mode 100644 index 0000000..a87f20c --- /dev/null +++ b/donor.php @@ -0,0 +1,134 @@ + + + + + + + Donate Food + + + +
+ +
+ + +
+
+

logo

+
+

Food Donation Form

+

Please provide correct information.

+
+ + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/donorhome.css b/donorhome.css new file mode 100644 index 0000000..ef48a73 --- /dev/null +++ b/donorhome.css @@ -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; +} + diff --git a/donorhome.php b/donorhome.php new file mode 100644 index 0000000..861e38a --- /dev/null +++ b/donorhome.php @@ -0,0 +1,130 @@ + + + + + + + + Donor Home + + + + +
+
+

Welcome, !

+
+ +
+
+
+ Profile Picture +
+
+
+ + Null +
+
+ + +
+
+
+
+ +
+ + + +
+ + +
+

Contribution History

+ +

Donated 10 kg of Vegetables from Anamnagar on 2025-01-12 22:25:37. Expires on 2025-01-20.

+ +
    + +
  • + Donated of + from + on + + (Expires on ) +
    • + +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/hand-heart-line.png b/hand-heart-line.png new file mode 100644 index 0000000..9c6836f Binary files /dev/null and b/hand-heart-line.png differ diff --git a/home-background.jpg b/home-background.jpg new file mode 100644 index 0000000..73b7d60 Binary files /dev/null and b/home-background.jpg differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..ec499d8 --- /dev/null +++ b/home.html @@ -0,0 +1,193 @@ + + + + + + Document + + + + + +
+ +
+ +
+ +
+
+
+

Welcome To

+

FoodShare

+ +

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!

+
+ Join + Contact Us +
+
+
+ +
+
+
+ +
+
+
+ +
+
+

About Us

+

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.

+ +
+ +
+
+ +
+

Team

+
+
+
+
    +
  • + User +

    Anshuman Bist

    + +
    • +
  • + User +

    Pradip Rawal

    + +
    • +
  • + User +

    Prashant Joshi

    + +
    • +
+
+
+
+
+ + + +
+

Contact Us

+
+
    +
  • + +

    Maiti Devi Marg, Kathmandu 44600

    +
    • +
  • + +

    info@coffeeshopwebsite.com

    +
    • +
  • + +

    +977 9745808586

    +
    • +
  • + +

    Monday - Friday; 9:00 AM - 5:00 PM

    +
    • +
+
+ + + + + +
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/i1.jpg b/i1.jpg new file mode 100644 index 0000000..9b28eb5 Binary files /dev/null and b/i1.jpg differ diff --git a/i2.jpg b/i2.jpg new file mode 100644 index 0000000..7c360a7 Binary files /dev/null and b/i2.jpg differ diff --git a/i3.jpg b/i3.jpg new file mode 100644 index 0000000..c7d2a00 Binary files /dev/null and b/i3.jpg differ diff --git a/i4.jpg b/i4.jpg new file mode 100644 index 0000000..50c6e36 Binary files /dev/null and b/i4.jpg differ diff --git a/login.css b/login.css new file mode 100644 index 0000000..39c9725 --- /dev/null +++ b/login.css @@ -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; +} \ No newline at end of file diff --git a/login.php b/login.php new file mode 100644 index 0000000..1332c84 --- /dev/null +++ b/login.php @@ -0,0 +1,98 @@ + 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); +} +?> + + + + + + Login + + + +
+ +

Login

+ + + +
+

+
+ + +
+ + + + + + + +

Don't have an account? Sign Up

+
+
+ + \ No newline at end of file diff --git a/logo-about.png b/logo-about.png new file mode 100644 index 0000000..ab28633 Binary files /dev/null and b/logo-about.png differ diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..ab28633 Binary files /dev/null and b/logo.png differ diff --git a/logout-box-r-line.png b/logout-box-r-line.png new file mode 100644 index 0000000..74f1ffe Binary files /dev/null and b/logout-box-r-line.png differ diff --git a/pradip.jpg b/pradip.jpg new file mode 100644 index 0000000..20981fc Binary files /dev/null and b/pradip.jpg differ diff --git a/receiver.css b/receiver.css new file mode 100644 index 0000000..3a0f761 --- /dev/null +++ b/receiver.css @@ -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; +} diff --git a/receiver.php b/receiver.php new file mode 100644 index 0000000..72c575c --- /dev/null +++ b/receiver.php @@ -0,0 +1,68 @@ +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 . "
" . $conn->error; + } +} + +$conn->close(); +?> + + + + + + + Receiver + + + + + + +
+ +

Request Your Needs

+
+ + + + + + + + + + +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..135d6c8 --- /dev/null +++ b/script.js @@ -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()); \ No newline at end of file diff --git a/signup.css b/signup.css new file mode 100644 index 0000000..e0ab5a3 --- /dev/null +++ b/signup.css @@ -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; +} \ No newline at end of file diff --git a/signup.js b/signup.js new file mode 100644 index 0000000..5ad9bdc --- /dev/null +++ b/signup.js @@ -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(); + }); +}); \ No newline at end of file diff --git a/signup.php b/signup.php new file mode 100644 index 0000000..605b89d --- /dev/null +++ b/signup.php @@ -0,0 +1,74 @@ + + + + + + + + + + Signup page + + + + +
+ +

Sign Up

+
+ + + + + + + + + +

+ +
+

Already have an account?Login

+ +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3e977c9 --- /dev/null +++ b/style.css @@ -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; + } +} + diff --git a/user-image.png b/user-image.png new file mode 100644 index 0000000..d6a3362 Binary files /dev/null and b/user-image.png differ diff --git a/userbackground.png b/userbackground.png new file mode 100644 index 0000000..299775c Binary files /dev/null and b/userbackground.png differ