You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
8.6 KiB
193 lines
8.6 KiB
<!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> |