Scribd
Upload
3 views

Source Code Project

The document is an HTML and CSS code for a website promoting Fit India Protein Powder, featuring sections like navigation, product listings, a BMI calculator, and an about section. It includes various protein products with prices, a cart system, and a footer with links for inquiries and sign-ups. The CSS styles the layout, colors, and typography to enhance user experience.

Uploaded by

ruturajpawar1835
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Source Code Project

The document is an HTML and CSS code for a website promoting Fit India Protein Powder, featuring sections like navigation, product listings, a BMI calculator, and an about section. It includes various protein products with prices, a cart system, and a footer with links for inquiries and sign-ups. The CSS styles the layout, colors, and typography to enhance user experience.

Uploaded by

ruturajpawar1835
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 105

Index.

html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Fit India Protein Powder - The Best Supplement for Your
Fitness Journey.">

<title>Fit India Protein Powder</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Navigation Bar -->

<header>

<nav>

<ul>

<li><a href="">Home</a></li>

<li><a href="#trend">Trends</a></li>

<li><a href="login.html">Register</a></li>

<li><a href="categories.html">Categories</a></li>

<li><a href="#product">Products</a></li>

<li><a href="#cart" id="view-cart">View Cart </a></li>

</ul>

</nav>

</header>
<!-- Home Section -->

<section id="home" class="hero">

<h1>Welcome to Fit India Protein Powder</h1>

<p>Browse our premium protein products to boost your fitness journey.</p>

<img src="template.jpg" alt="Fit India Protein Powder">

</section>

<!-- Hero Section -->

<section id="home" class="hero">

<h1>Fit India Protein Powder</h1>

<p>Transform Your Fitness with the Best Protein Supplement.</p>

<br>

<a href="calorie.html" class="cta-button">calorieneed</a>

<a href="calorieburn.html" class="cta-button">calorieburn</a>

</section>

<!-- Products Section -->

<div id="product">

<div class="head">

<h2>Our Products</h2>

</div>

<div class="products">

<!-- Product 1 -->


<div class="productcard">

<img src="protein1.jpg" alt="Protein Powder">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>

<button class="add-to-cart" onclick="addToCart('Dynamicprotein powder',4999)">Add to


Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="protein2.png" alt="Protein Powder">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" onclick="addToCart('Protein Powder', 3599)">Add to


Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="protein3.png" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('natural vegan protein', 3499)">Add to


Cart</button>
</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein bar.png" alt="Protein Powder">

<h3> Protein</h bar3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Protein bar', 3499)">Add to Cart</button>

</div>

<!-- Product 5 -->

<div class="productcard">

<img src="gymbags1.jpg" alt="gym bags">

<h3>gym bags</h3>

<p>Rs.1499</p>

<button class="add-to-cart" onclick="addToCart('gym bags', 1499)">Add to Cart</button>

</div>

<!-- Product 6 -->

<div class="productcard">

<img src="gainer.jpg" alt="Protein Powder">

<h3>gainer</h3>
<p>Rs.2499</p>

<button class="add-to-cart" onclick="addToCart('gainer', 2499)">Add to Cart</button>

</div>

<!-- Product 7 -->

<div class="productcard">

<img src="high protein oats.png" alt="Protein Powder">

<h3>high Protein oats</h3>

<p>Rs.499</p>

<button class="add-to-cart" onclick="addToCart('oats', 499)">Add to Cart</button>

</div>

<!-- Product 8 -->

<div class="productcard">

<img src="sasche.jpg" alt="Protein Powder">

<h3>Natural Protein</h3>

<p>Rs.3199</p>

<button class="add-to-cart" onclick="addToCart('Protein', 3199)">Add to Cart</button>

</div>

<!-- Product 9 -->

<div class="productcard">

<img src="isolate.png" alt="Protein Powder">

<h3>whey Protein isolate</h3>


<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('isolate protein', 3499)">Add to


Cart</button>

</div>

<!-- Product 10 -->

<div class="productcard">

<img src="gym sando 1.jpg" alt="Protein Powder">

<h3>gym sando</h3>

<p>Rs.499</p>

<button class="add-to-cart" onclick="addToCart('sando', 499)">Add to Cart</button>

</div>

<!-- Product 11 -->

<div class="productcard">

<img src="chocolate.png" alt="Protein Powder">

<h3> Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Protein', 3499)">Add to Cart</button>

</div>

<!-- Product 12 -->

<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>


<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

</div>

</div>

<!-- Cart -->

<div id="cart">

<div class="cart">

<h2>Your Cart</h2>

<table id="cart-table">

<tr>

<th>Item</th>

<th>Price</th>

<th>Quantity</th>

<th>Total</th>

</tr>

</table>

<h3 id="total-price">Total: $0</h3>

<button id="checkout-button" onclick="checkout()">Checkout</button>

<button id="clear-cart-button">Clear Cart</button>

<button id="close-cart">Close Cart</button>

</div>

</div>
</div>

</div>

<br>

<div id="trend">

<div class="head">

<h1>Trending products</h1>

</div>

<div class="trends">

<div class="trendfoods">

<img src="chocolate.png" alt="">

<img src="gainer.jpg" alt="">

<img src="isolate.png" alt="">

</div>

<div class="trendfoods">

<img src="protein1.jpg" alt="">

<img src="protein2.png" alt="">

<img src="protein3.png" alt="">

</div>

<div class="trendfoods">

<img src="protein4.jpg" alt="">

<img src="sasche.jpg" alt="">

<img src="chocolate.png" alt="">

</div>

</div>

</div>
<!--BMI Calculator-->

<div class="container">

<h1>BMI Calculator</h1>

<div class="form-group">

<input type="text" placeholder="Full Name" required>

<label for="weight">Weight (kg):</label>

<input type="number" id="weight" placeholder="Enter your weight" required>

</div>

<div class="form-group">

<label for="height">Height (cm):</label>

<input type="number" id="height" placeholder="Enter your height" required>

</div>

<button onclick="calculateBMI()">Calculate BMI</button>

<div class="result" id="result">

<h3>Your BMI: <span id="bmiValue">0</span></h3>

<p id="bmiCategory"></p>

</div>

</div>

<div class ="container" style="

max-width: 1200px;

margin: 100px auto;

padding: 20px;

background-color: #201f1f;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border-radius: 8px;

text-align: left;

">

<!-- About Section -->

<div class="text">

<h2 style="text-align: center;">About Fit India Protein Powder</h2><br><br>

<p>At Fit India Protein, we are committed to revolutionizing fitness and nutrition for every Indian.
Our mission is to provide high-quality, science-backed, and affordable protein supplements that fuel
your journey to a healthier, stronger, and more active lifestyle.

We understand that fitness is not just about lifting weights—it’s about sustainable health,
balanced nutrition, and peak performance. That’s why we source the finest ingredients and use
cutting-edge formulation techniques to ensure our products meet the highest industry standards.

Whether you're an athlete, gym-goer, or simply someone looking to boost your daily protein
intake, Fit India Protein is here to support your goals. With a range of whey, plant-based, and
specialized protein blends, we cater to diverse dietary needs and preferences.

Join us in our mission to build a fitter, healthier India—one scoop at a time!

<br>

✅ Pure. Safe. Effective.<br><br>

✅ Tested for Quality & Performance<br><br>

✅ Made for Every Indian

<br><br>

Let’s get stronger together! 💪</p><br>

</div>

<br>
<br>

<!-- Benefits Section -->

<div class="text">

<h2 style="text-align:center">Benefits of Fit India Protein Powder</h2><br><br>

Boosts muscle growth and recovery<br>

Helps in weight management<br>

Provides long-lasting energy<br>

Improves overall health and immunity<br>

<br>

</div>

<p>&copy; 2024 Fit India Protein Powder. All Rights Reserved.</p>

</div>

</div>

</div>

<!-- Footer Section -->

<div class="footer">

<li><a href="productinquiry.html">product enquiry</a></li>

<li><a href="newsletter_signup.html">signup for news letter</a></li>

<li><a href="samplereq.html"> sample request</a></li>

<li><a href="contact.html">contact us</a></li>

<li><a href="feedback.html">feedback</a></li>

<li><a href="payment.html">Payments</a></li>
<li><a href="" "> </a></li>

</div>

<script src="script.js"></script>

</body>

</html>

Style.css
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

line-height: 1.6;

color: #f9f5f5;

background-color: #403f3f;

header {

background-color: #060606;

color: #f9f3f3;

padding: 50px;

}
header nav ul {

list-style-type: none;

display: flex;

justify-content: center;

header nav ul li {

margin: 0 15px;

header nav ul li a {

color: #fff;

text-decoration: none;

font-weight: bold;

ul{

display: flex;

ul li{

list-style: none;

li a{

text-decoration: none;

color:white;

font-size: 20px;
margin-inline: 22px;

.logo{

color: white;

font-size: 21px;

.hero {

text-align: center;

padding: 50px 60px;

background-color: #2c2a2a;

.hero h1 {

font-size: 3em;

.hero img{

width: 1520px;

.hero .cta-button {

background-color: #5cb85c;

color: white;

padding: 10px 60px;

text-decoration: none;
border-radius: 5px;

.products {

display: flex;

justify-content: center;

flex-wrap: wrap;

.productcard{

width: 300px;

padding:11px;

background-color: rgb(230, 220, 220);

margin-inline: 80px;

margin-top: 24px;

color: black;

cursor: pointer;

.productcard img{

width: 100%;

.productcard p{

padding: 7px;

.productcard button{
width: 150px;

background-color: orangered;

color: white;

padding: 5px;

border: none;

font-size: 18px;

/* Cart Section */

#cart {

padding: 30px;

background-color: #353534;

#cart h2 {

text-align: center;

font-size: 28px;

margin-bottom: 20px;

#cart-list {

list-style-type: none;

#cart-list li {

font-size: 20px;
margin: 10px 0;

#total-price {

font-weight: bold;

font-size: 24px;

color: #ff5733;

#checkout-btn {

display: block;

width: 100%;

padding: 15px;

background-color: #ff5733;

color: rgb(244, 113, 47);

font-size: 20px;

border: none;

cursor: pointer;

transition: background-color 0.3s;

margin-top: 20px;

border-radius: 5px;

#checkout-btn:hover {

background-color: #c44324;

}
/* Footer */

footer {

text-align: center;

padding: 20px;

background-color: #ff5733;

color: rgb(242, 231, 231);

font-size: 14px;

.trends{

width:900px;

height:300px;

position:relative;

margin:auto;

overflow:hidden;

.trendfoods{

display:flex;

justify-content: center;

width: 100%;

height:100%;

position:absolute;

margin:auto;
overflow:hidden;

transition: all 1s ease;

color: #ccc;

.trendfoods img{

width: 240px;

margin-inline: 15px;

section {

padding: 40px 20px;

#about img {

max-width: 100%;

height: auto;

margin-top: 20px;

.benefits ul {

list-style-type: none;

padding-left: 20px;

.benefits li {

margin-bottom: 10px;

}
.container {

max-width: 400px;

margin: 50px auto;

padding: 20px;

background-color: #8e8a8a;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

border-radius: 8px;

text-align: center;

h1 {

color: #f1eded;

text-align: center;

.form-group {

margin-bottom: 20px;

text-align: left;

label {

font-size: 14px;

color: #555;

input {
width: 100%;

padding: 10px;

font-size: 16px;

margin-top: 8px;

border: 1px solid #ccc;

border-radius: 4px;

button {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

button:hover {

background-color: #45a049;

.result {

margin-top: 20px;

#bmiValue {
font-weight: bold;

font-size: 24px;

#bmiCategory {

font-size: 16px;

color: #242323;

.form-container {

margin-bottom: 30px;

background-color: #656262;

padding: 20px;

border-radius: 8px;

.form-container h3 {

margin-bottom: 10px;

input, textarea {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 5px;

}
button {

background-color: #5cb85c;

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

border-radius: 5px;

.footer {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

text-align: center;

background-color: #0d0d0d;

color: #f8f5f5;

padding: 50px;

margin-top: 66px;

Categories.html
<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Fit India Protein Powder - The Best Supplement for Your
Fitness Journey.">

<title>Fit India Protein Powder</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div id="product">

<div class="head">

<h1>Categories</h1>

</div>

<div class="products">

<br>

<br>

<br>

<!-- protein Section -->

<div id="product">

<div class="head">

<h1>Proteins</h1>

</div>

<div class="products">

<div class="productcard">
<img src="protein2.png" alt="Protein Powder">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" data-product="Product 1" data-price="10">Add to Cart</button>

</div>

<div class="productcard">

<img src="protein2.png" alt="Protein Powder">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" data-product="Product 1" data-price="10">Add to


Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="protein3.png" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product="Product 1" data-price="10">Add to Cart</button>

</div>

<!-- Product 4 -->


<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product="Product 1" data-price="10">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product="Product 1" data-price="10">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

</div>
</div>

<!-- Gainer Section -->

<div id="product">

<div class="head">

<h1>Gainers</h1>

</div>

<div class="products">

<!-- Product 1 -->

<div class="productcard">

<img src="protein1.jpg" alt="Protein Powder">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>

<button class="add-to-cart" data-product-id="1" data-product-name="Dynamic Protein


Powder" data-product-price="4999">Add to Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="protein2.png" alt="Protein Powder">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>
<button class="add-to-cart" data-product-id="2" data-product-name="Ultimate Whey
Protein" data-product-price="35999">Add to Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="protein3.png" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->


<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein4.jpg" alt="Protein Powder">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

</div>

</div>

<!-- workout -->

<div id="product">

<div class="head">

<h1>Workout Essentials</h1>

</div>
<div class="products">

<!-- Product 1 -->

<div class="productcard">

<img src="gym sando 1.jpg" alt="gym sando">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="gym sando.jpg" alt="gym sando">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="gym shaker.jpg" alt="shaker">


<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="gymbags1.jpg" alt="gym bag">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="shoes.jpg" alt="shoes">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

<!-- Product 4 -->


<div class="productcard">

<img src="shoes1.webp" alt="shoes">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" onclick="addToCart('Pizza', 8)">Add to Cart</button>

</div>

</div>

</div>

<a href="cart.html">Go to Cart</a>

<script src="script.js"></script>

<!-- workout -->

<div id="product">

<div class="head">

<h1>Supplyments</h1>

</div>

<div class="products">

<!-- Product 1 -->

<div class="productcard">

<img src="gym sando 1.jpg" alt="gym sando">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>
<button class="add-to-cart" data-product-id="1" data-product-name="Dynamic Protein
Powder" data-product-price="4999">Add to Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="gym sando.jpg" alt="gym sando">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" data-product-id="2" data-product-name="Ultimate Whey


Protein" data-product-price="35999">Add to Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="gym shaker.jpg" alt="shaker">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->


<div class="productcard">

<img src="gymbags1.jpg" alt="gym bag">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="shoes.jpg" alt="shoes">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="shoes1.webp" alt="shoes">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>
</div>

</div>

<!-- workout -->

<div id="product">

<div class="head">

<h1>protein foods</h1>

</div>

<div class="products">

<!-- Product 1 -->

<div class="productcard">

<img src="musli.png" alt="high protein musli">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>

<button class="add-to-cart" data-product-id="1" data-product-name="Dynamic Protein


Powder" data-product-price="4999">Add to Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="musli1.png" alt="musli">

<h3>Ultimate Whey Protein</h3>


<p>Rs.3599</p>

<button class="add-to-cart" data-product-id="2" data-product-name="Ultimate Whey


Protein" data-product-price="35999">Add to Cart</button>

</div>

<!-- Product 3 -->

<div class="productcard">

<img src="high protein oats.png" alt="high protein oats">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="protein bar.png" alt="protein bar">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->


<div class="productcard">

<img src="proteinbar1.png" alt="proteinbar">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="proteinbar2.png" alt="proteinbar">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

</div>

</div>

<!-- workout -->

<div id="product">

<div class="head">

<h1>Natural herbs</h1>

</div>
<div class="products">

<!-- Product 1 -->

<div class="productcard">

<img src="chia seeds.jpg" alt="chia seeds">

<h3>Dynamic Protein Powder</h3>

<p>Rs.4999</p>

<button class="add-to-cart" data-product-id="1" data-product-name="Dynamic Protein


Powder" data-product-price="4999">Add to Cart</button>

</div>

<!-- Product 2 -->

<div class="productcard">

<img src="shilajit.jpg" alt="shilajit.jpg">

<h3>Ultimate Whey Protein</h3>

<p>Rs.3599</p>

<button class="add-to-cart" data-product-id="2" data-product-name="Ultimate Whey


Protein" data-product-price="35999">Add to Cart</button>

</div>

<!-- Product 3 -->


<div class="productcard">

<img src="ashwagandha.jpg" alt="ashwagandha">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="safed musli.jpg" alt="safed musli">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

<!-- Product 4 -->

<div class="productcard">

<img src="gokshura.jpg" alt="gokshura">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>
<!-- Product 4 -->

<div class="productcard">

<img src="green tea.jpg" alt="green tea">

<h3>Natural Vegan Protein</h3>

<p>Rs.3499</p>

<button class="add-to-cart" data-product-id="3" data-product-name="Natural Vegan Protein"


data-product-price="3499">Add to Cart</button>

</div>

</div>

</div>

<script src="script.js"></script>

</body>

Categories.css
.products {

display: flex;

justify-content: center;

flex-wrap: wrap;

.productcard{

width: 300px;
padding:11px;

background-color: rgb(230, 220, 220);

margin-inline: 80px;

margin-top: 24px;

color: black;

cursor: pointer;

.productcard img{

width: 100%;

.productcard p{

padding: 7px;

.productcard button{

width: 150px;

background-color: orangered;

color: white;

padding: 5px;

border: none;

font-size: 18px;

.proteins {

display: flex;
justify-content: center;

flex-wrap: wrap;

.proteincard{

width: 300px;

padding:11px;

background-color: rgb(57, 55, 55);

margin-inline: 80px;

margin-top: 24px;

color: black;

cursor: pointer;

.proteincard img{

width: 100%;

.proteincard p{

padding: 7px;

.proteincard button{

width: 150px;

background-color: orangered;

color: white;

padding: 5px;

border: none;
font-size: 18px;

Script.js
document.querySelectorAll('form').forEach(form => {

form.addEventListener('submit', function(event) {

if (!form.action.includes('.php')) {

event.preventDefault(); // Prevent submission only for forms without backend processing

let message = "Thank you for submitting your form!";

alert(message);

form.reset(); // Optionally reset the form

});

});

let cart = [];

function addToCart(item, price) {

const existingItem = cart.find(cartItem => cartItem.name === item);

if (existingItem) {

existingItem.quantity += 1;

existingItem.total = existingItem.quantity * existingItem.price;

} else {

const newItem = {
name: item,

price: price,

quantity: 1,

total: price

};

cart.push(newItem);

renderCart();

function renderCart() {

const cartTable = document.getElementById('cart-table');

const totalPriceElement = document.getElementById('total-price');

// Clear previous cart items

const rows = cartTable.getElementsByTagName('tr');

for (let i = rows.length - 1; i > 0; i--) {

rows[i].remove();

let totalPrice = 0;

// View cart functionality

document.getElementById('view-cart').addEventListener('click', () => {

document.getElementById('cart').style.display = 'block';

});
// Close cart

document.getElementById('close-cart').addEventListener('click', () => {

document.getElementById('cart').style.display = 'none';

});

// Clear cart

document.getElementById('clear-cart-button').addEventListener('click', () => {

cart = [];

updateCart();

});

// Render new cart items

cart.forEach(item => {

const row = document.createElement('tr');

row.innerHTML = `

<td>${item.name}</td>

<td>$${item.price}</td>

<td>${item.quantity}</td>

<td>$${item.total}</td>

`;

cartTable.appendChild(row);

totalPrice += item.total;

});
totalPriceElement.innerHTML = `Total: $${totalPrice}`;

function checkout() {

if (cart.length === 0) {

alert('Your cart is empty!');

return;

alert('CHAL NIKAL.');

cart = [];

renderCart();

function calculateBMI() {

// Get the weight and height values from the user

const weight = parseFloat(document.getElementById('weight').value);

const height = parseFloat(document.getElementById('height').value) / 100; // Convert height from


cm to meters

// Validate input

if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {

alert("Please enter valid weight and height values.");

return;

// Calculate BMI

const bmi = (weight / (height * height)).toFixed(2);


// Display the result

document.getElementById('bmiValue').textContent = bmi;

document.getElementById('result').style.display = 'block';

// Determine the BMI category

let category = "";

if (bmi < 18.5) {

category = "Underweight";

} else if (bmi >= 18.5 && bmi < 24.9) {

category = "Normal weight";

} else if (bmi >= 25 && bmi < 29.9) {

category = "Overweight";

} else {

category = "Obesity";

document.getElementById('bmiCategory').textContent = `Category: ${category}`;

productcard.forEach((curcard)=>{

curcard.addEventListener("click", function(){

console.log(curcard);

let div = document.createElement("div");

div.classList.add("cardDetails");

div.innerHTML=`
<i id="icon" class="fa-solid fa-xmark"></i>

<img src=${curcard.firstElementChild.src} alt="">

<h2>food details</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam consequuntur sequi
quis expedita tempore ex veniam culpa voluptate vel at. Veniam, fugit!</p>

document.querySelector("body").appendChild(div)

document.querySelector("#icon").addEventListener("click",function(){

div.remove();

})

})

})

let trendfoods = document.querySelectorAll(".trendfoods");

let count = 0;

console.log(trendfoods);

trendfoods.forEach((imgs, index) => {

imgs.style.left = `${index * 100}%`; // Adjusting left position based on the index

});

const myfun = () => {

trendfoods.forEach((curImg) => {

curImg.style.transform = `translateX(-${count * 100}%)`; // Corrected translateX

});
};

setInterval(() => {

count++;

if (count == trendfoods.length) {

count = 0;

myfun();

}, 4000);

// food details

productcard.forEach((curcard)=>{

curcard.addEventListener("click", function(){

console.log(curcard);

let div = document.createElement("div");

div.classList.add("cardDetails");

div.innerHTML=`

<i id="icon" class="fa-solid fa-xmark"></i>

<img src=${curcard.firstElementChild.src} alt="">

<h2>food details</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam consequuntur sequi
quis expedita tempore ex veniam culpa voluptate vel at. Veniam, fugit!</p>

document.querySelector("body").appendChild(div)

document.querySelector("#icon").addEventListener("click",function(){
div.remove();

})

})

})

proteincard.forEach((curcard)=>{

curcard.addEventListener("click", function(){

console.log(curcard);

let div = document.createElement("div");

div.classList.add("cardDetails");

div.innerHTML=`

<i id="icon" class="fa-solid fa-xmark"></i>

<img src=${curcard.firstElementChild.src} alt="">

<h2>food details</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam consequuntur sequi
quis expedita tempore ex veniam culpa voluptate vel at. Veniam, fugit!</p>

document.querySelector("body").appendChild(div)

document.querySelector("#icon").addEventListener("click",function(){

div.remove();

})

})

})
Gainercard.forEach((curcard)=>{

curcard.addEventListener("click", function(){

console.log(curcard);

let div = document.createElement("div");

div.classList.add("cardDetails");

div.innerHTML=`

<i id="icon" class="fa-solid fa-xmark"></i>

<img src=${curcard.firstElementChild.src} alt="">

<h2>food details</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam consequuntur sequi
quis expedita tempore ex veniam culpa voluptate vel at. Veniam, fugit!</p>

document.querySelector("body").appendChild(div)

document.querySelector("#icon").addEventListener("click",function(){

div.remove();

})

})

})

Forms
Signup
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My projects</title>

<link rel="stylesheet" href="login.css">

</head>

<body>

<form action="action_page.php">

<div class="container">

<h1>signup</h1>

<p>Please fill in this form to signup in account.</p>

<hr>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" id="email" required>

<label for="Name"><b>name</b></label>

<input type="text" placeholder="Enter name" name="" id="" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" id="psw" required>

<hr>

<button type="submit" class="submitbtn">submit</button>

</div>

</form>

</body>
Signup.php
<?php

// Database connection details

$servername = "localhost"; // Your database host, usually localhost

$username = "root"; // Your database username

$password = ""; // Your database password

$dbname = "fitindia_db"; // Database name

// Create connection to MySQL database

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if form data is submitted via POST method

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Sanitize and collect form data

$name = $conn->real_escape_string($_POST['name']);

$email = $conn->real_escape_string($_POST['email']);

$password = $conn->real_escape_string($_POST['password']);

// Hash the password before storing (Important for security)

$hashed_password = password_hash($password, PASSWORD_DEFAULT);

// Prepare the SQL statement to insert user data


$sql = "INSERT INTO signups (name, email, password) VALUES ('$name', '$email',
'$hashed_password')";

if ($conn->query($sql) === TRUE) {

echo "New record created successfully!";

// Optionally, you can redirect to another page, like a login page or dashboard

// header("Location: login.php");

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

// Close the connection

$conn->close();

} else {

echo "Invalid request.";

?>

Login.php
<!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="LoginsignUp.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet">
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-
B309-BB3FDD723AC1/main.js?
attr=ZjuSm4bNHu52cCsw4aQvxkWVuCt4wUDBeyQt92flXp_BTD972BSkf5nMXIYHLOaABweuR8LIro8S
9IbRhGIaeVVeD4QzmqxjeXkN1UAF1UU" charset="UTF-8"></script>

</head>

<body>

<div class="container" id="container">

<div class="form-container sign-up-container">

<form id="signup-form" action="signup.php" method="post">

<h1>Create Account</h1>

<div class="social-container">

<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="social"><i class="fab fa-google"></i></a>

<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>

</div>

<span>or use your email for registration</span>

<input type="text" placeholder="Name" name="name" required />

<input id="SignUpEmail" type="email" placeholder="Email" name="email" required />

<input id="SignUpPassword" type="password" placeholder="Password" name="password"


required />

<button id="SignUpSubmit" type="submit">Sign Up</button>

</form>

</div>

<div class="form-container sign-in-container">

<form id="login-form" action="login.php" method="post">

<h1>Login</h1>

<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>

<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>

</div>

<span>or use your account</span>

<input id="LoginEmail" type="email" placeholder="Email" name="email" required />

<input id="LoginPassword" type="password" placeholder="Password" name="password"


required />

<a href="#">Forgot your password?</a>

<button id="LoginSubmit" type="submit">Login</button>

</form>

</div>

<div class="overlay-container">

<div class="overlay">

<div class="overlay-panel overlay-left">

<h1>Welcome Back!</h1>

<p>To keep connected with us please login with your personal info</p>

<button class="ghost" type="button" id="signIn">Sign In</button>

</div>

<div class="overlay-panel overlay-right">

<h1>Hello, Friend!</h1>

<p>Enter your personal details and start journey with us</p>

<button class="ghost" type="button" id="signUp">Sign Up</button>

</div>

</div>

</div>

</div>
<script type="module" src="Login.js"></script>

</body>

</html>

Login signup.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

*{

box-sizing: border-box;

::-webkit-scrollbar {

display: none;

/* Hides the scrollbar */

body {

/* background: #f6f5f7; */

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

font-family: 'Montserrat', sans-serif;

height: 90vh;

margin: -20px 0 50px;


background-image: url('../Images/Login2.jpg');

background-size: cover;

h1 {

font-weight: bold;

margin: 0;

h2 {

text-align: center;

p{

font-size: 14px;

font-weight: 100;

line-height: 20px;

letter-spacing: 0.5px;

margin: 20px 0 30px;

span {

font-size: 12px;

a{

color: #333;
font-size: 14px;

text-decoration: none;

margin: 15px 0;

button {

border-radius: 20px;

border: 1px solid #FF4B2B;

background-color: #FF4B2B;

color: #FFFFFF;

font-size: 12px;

font-weight: bold;

padding: 12px 45px;

letter-spacing: 1px;

text-transform: uppercase;

transition: transform 80ms ease-in;

button:active {

transform: scale(0.95);

button:focus {

outline: none;

button.ghost {
background-color: transparent;

border-color: #FFFFFF;

form {

background-color: #FFFFFF;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 50px;

height: 100%;

text-align: center;

input {

background-color: #eee;

border: none;

padding: 12px 15px;

margin: 8px 0;

width: 100%;

.container {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),


0 10px 10px rgba(0, 0, 0, 0.22);

position: relative;

overflow: hidden;

width: 768px;

max-width: 100%;

min-height: 480px;

.form-container {

position: absolute;

top: 0;

height: 100%;

transition: all 0.6s ease-in-out;

.sign-in-container {

left: 0;

width: 50%;

z-index: 2;

.container.right-panel-active .sign-in-container {

transform: translateX(100%);

.sign-up-container {

left: 0;
width: 50%;

opacity: 0;

z-index: 1;

.container.right-panel-active .sign-up-container {

transform: translateX(100%);

opacity: 1;

z-index: 5;

animation: show 0.6s;

@keyframes show {

0%,

49.99% {

opacity: 0;

z-index: 1;

50%,

100% {

opacity: 1;

z-index: 5;

}
.overlay-container {

position: absolute;

top: 0;

left: 50%;

width: 50%;

height: 100%;

overflow: hidden;

transition: transform 0.6s ease-in-out;

z-index: 100;

.container.right-panel-active .overlay-container {

transform: translateX(-100%);

.overlay {

background: #FF416C;

background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);

background: linear-gradient(to right, #FF4B2B, #FF416C);

background-repeat: no-repeat;

background-size: cover;

background-position: 0 0;

color: #FFFFFF;

position: relative;

left: -100%;

height: 100%;

width: 200%;
transform: translateX(0);

transition: transform 0.6s ease-in-out;

.container.right-panel-active .overlay {

transform: translateX(50%);

.overlay-panel {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 40px;

text-align: center;

top: 0;

height: 100%;

width: 50%;

transform: translateX(0);

transition: transform 0.6s ease-in-out;

.overlay-left {

transform: translateX(-20%);

}
.container.right-panel-active .overlay-left {

transform: translateX(0);

.overlay-right {

right: 0;

transform: translateX(0);

.container.right-panel-active .overlay-right {

transform: translateX(20%);

.social-container {

margin: 20px 0;

.social-container a {

border: 1px solid #DDDDDD;

border-radius: 50%;

display: inline-flex;

justify-content: center;

align-items: center;

margin: 0 5px;

height: 40px;

width: 40px;

}
footer {

background-color: #222;

color: #fff;

font-size: 14px;

bottom: 0;

position: fixed;

left: 0;

right: 0;

text-align: center;

z-index: 999;

footer p {

margin: 10px 0;

footer i {

color: red;

footer a {

color: #3c97bf;

text-decoration: none;

}
Login.php
<?php

$servername = "localhost";

$username = "root";

$password = ""; // Default is empty in XAMPP

$dbname = "fitindia_db"; // ✅ Ensure there is NO comma

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if form data is submitted via POST method

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Collect form data

$email = $_POST['email'];

$password = $_POST['password'];

// Sanitize the input to prevent SQL injection

$email = $conn->real_escape_string($email);

$password = $conn->real_escape_string($password);
// Prepare the SQL query to fetch user details by email

$sql = "SELECT * FROM signups WHERE email = '$email'";

$result = $conn->query($sql);

// Check if user exists

if ($result->num_rows > 0) {

// Fetch user details from the result

$user = $result->fetch_assoc();

// Verify the provided password against the hashed password in the database

if (password_verify($password, $user['password'])) {

// Password is correct, proceed with login

echo "Login successful!";

// You can also start a session here and redirect the user to a dashboard or home page.

// Example: $_SESSION['user_id'] = $user['id'];

// header("Location: dashboard.php"); // Redirect to the dashboard page

} else {

// Invalid password

echo "Incorrect password!";

} else {

// User with the provided email does not exist

echo "No user found with this email!";

// Close the database connection

$conn->close();
} else {

echo "Invalid request.";

?>

Calorieneed.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Calorie Needs Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f4f4f4;

margin: 0;

padding: 0;

.container {

max-width: 400px;

background: white;

margin: 50px auto;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


}

h2 {

color: #333;

label {

font-weight: bold;

display: block;

margin-top: 10px;

input, select {

width: 100%;

padding: 10px;

margin: 5px 0;

border: 1px solid #ccc;

border-radius: 5px;

button {

background: #28a745;

color: white;

padding: 10px;

border: none;

width: 100%;

margin-top: 15px;
font-size: 16px;

cursor: pointer;

border-radius: 5px;

button:hover {

background: #218838;

#result {

margin-top: 20px;

font-size: 18px;

font-weight: bold;

color: #333;

</style>

</head>

<body>

<div class="container">

<h2>Calorie Needs Calculator</h2>

<label for="age">Age:</label>

<input type="number" id="age" min="1" required>

<label for="gender">Gender:</label>

<select id="gender">
<option value="male">Male</option>

<option value="female">Female</option>

</select>

<label for="weight">Weight (kg):</label>

<input type="number" id="weight" min="1" required>

<label for="height">Height (cm):</label>

<input type="number" id="height" min="1" required>

<label for="activity">Activity Level:</label>

<select id="activity">

<option value="1.2">Sedentary (little or no exercise)</option>

<option value="1.375">Light exercise (1-3 days/week)</option>

<option value="1.55">Moderate exercise (3-5 days/week)</option>

<option value="1.725">Very active (6-7 days/week)</option>

<option value="1.9">Super active (athlete, hard exercise)</option>

</select>

<button onclick="calculateCalories()">Calculate</button>

<div id="result"></div>

</div>

<script>

function calculateCalories() {

const age = document.getElementById('age').value;


const gender = document.getElementById('gender').value;

const weight = document.getElementById('weight').value;

const height = document.getElementById('height').value;

const activity = document.getElementById('activity').value;

if (!age || !weight || !height) {

alert("Please enter all values.");

return;

let BMR;

if (gender === 'male') {

BMR = 10 * weight + 6.25 * height - 5 * age + 5;

} else {

BMR = 10 * weight + 6.25 * height - 5 * age - 161;

const TDEE = BMR * activity;

document.getElementById('result').innerHTML = `Your daily calorie needs: <b>$


{TDEE.toFixed(2)} kcal</b>`;

</script>

</body>

</html>
Calorieburn.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Calorie Burn Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f4f4f4;

margin: 0;

padding: 0;

.container {

max-width: 400px;

background: white;

margin: 50px auto;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

color: #333;
}

label {

font-weight: bold;

display: block;

margin-top: 10px;

input, select {

width: 100%;

padding: 10px;

margin: 5px 0;

border: 1px solid #ccc;

border-radius: 5px;

button {

background: #007bff;

color: white;

padding: 10px;

border: none;

width: 100%;

margin-top: 15px;

font-size: 16px;

cursor: pointer;

border-radius: 5px;

}
button:hover {

background: #0056b3;

#result {

margin-top: 20px;

font-size: 18px;

font-weight: bold;

color: #333;

</style>

</head>

<body>

<div class="container">

<h2>Calorie Burn Calculator</h2>

<label for="weight">Weight (kg):</label>

<input type="number" id="weight" min="1" required>

<label for="activity">Activity Type:</label>

<select id="activity">

<option value="8">Running (8 METs)</option>

<option value="6">Cycling (6 METs)</option>

<option value="10">Swimming (10 METs)</option>

<option value="5">Walking (5 METs)</option>


<option value="7">Jump Rope (7 METs)</option>

<option value="9">Aerobics (9 METs)</option>

</select>

<label for="duration">Duration (minutes):</label>

<input type="number" id="duration" min="1" required>

<button onclick="calculateCaloriesBurned()">Calculate</button>

<div id="result"></div>

</div>

<script>

function calculateCaloriesBurned() {

const weight = document.getElementById('weight').value;

const activityMET = document.getElementById('activity').value;

const duration = document.getElementById('duration').value;

if (!weight || !duration) {

alert("Please enter all values.");

return;

// Formula: Calories burned = METs × weight (kg) × duration (hours)

const caloriesBurned = activityMET * weight * (duration / 60);

document.getElementById('result').innerHTML = `You burned approximately <b>$


{caloriesBurned.toFixed(2)} kcal</b>.`;
}

</script>

</body>

</html>

Contact.html
<!DOCTYPE html>

<html lang="en">

<head>

<title>Portfolio Round Icon</title>

<link rel="stylesheet" href="contact.css">

</head>

<body>

<div class="form-container">

<h2>Contact Us</h2>

<form action="contact.php" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" required></textarea>


<button type="submit">Send Message</button>

</form>

</div>

</div>

</body>

</html>

Contact.css
body {

font-family: 'Outfit', sans-serif;

background-color: #1f252e;

height: 100vh;

color: #faf8f8;

header {

background-color: #1f252e;

border: 2px solid rgb(249, 252, 247);

height: 130px;

position: sticky;

top: 0;

z-index: 1000;

.container {

display: flex;

width: 100%;

}
.form-container {

width: 60%;

background-color: rgb(70, 66, 66);

padding: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin-right: 50px;

h2 {

color: black;

label {

color: rgb(249, 247, 247);

display: block;

margin: 10px 0 5px;

input, textarea {

width: 95%;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 4px;

color: black;
}

button {

background-color: #7848d6;

color: white;

padding: 10px 15px;

border: none;

border-radius: 4px;

cursor: pointer;

text-decoration: none;

button:hover {

background-color: #4f03ab;

text-decoration: underline;

Contact.php
<?php

// Database credentials

$servername = "localhost"; // change to your server name if needed

$username = "root"; // your database username

$password = ""; // your database password, if any

$dbname = "fitindia_db"; // your database name

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);


// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Get form data

$name = $_POST['name'];

$email = $_POST['email'];

$message = $_POST['message'];

// Prepare and bind

$stmt = $conn->prepare("INSERT INTO contactus (name, email, message) VALUES (?, ?, ?)");

$stmt->bind_param("sss", $name, $email, $message);

// Execute the statement

if ($stmt->execute()) {

echo "Message sent successfully!";

} else {

echo "Error: " . $stmt->error;

// Close the statement

$stmt->close();

}
// Close the connection

$conn->close();

?>

Feedback.html
<!DOCTYPE html>

<html lang="en">

<head>

<title>feedback</title>

<link rel="stylesheet" href="feedback.css">

</head>

<body>

<br>

<div class="container">

<div class="feedback-form">

<h1>Give Your Feedback</h1>

<form action="feedback.php" method="POST" id="feedbackForm">

<label for="name">Your Name:</label>

<input type="text" id="name" name="name" placeholder="Enter your name" required>

<label for="email">Your Email:</label>

<input type="email" id="email" name="email" placeholder="Enter your email" required>


<label for="feedback">Your Feedback:</label>

<textarea id="feedback" name="feedback" rows="4" placeholder="Please provide your


feedback" required></textarea>

<center><button type="submit">Submit Feedback</button></center>

</form>

<div class="message" id="successMessage" style="display: none;">

Thank you for your feedback! We appreciate your input.

</div>

</div>

</div>

<script>

document.getElementById('feedbackForm').addEventListener('submit', function (e) {

e.preventDefault();

// Simple form validation and feedback message

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const feedback = document.getElementById('feedback').value;

if (name && email && feedback) {

// Submit the form using AJAX

const xhr = new XMLHttpRequest();

xhr.open("POST", "feedback.php", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {

document.getElementById('successMessage').style.display = 'block';

document.getElementById('feedbackForm').reset(); // Clear the form fields

};

xhr.send("name=" + encodeURIComponent(name) + "&email=" +


encodeURIComponent(email) + "&feedback=" + encodeURIComponent(feedback));

} else {

alert('Please fill in all fields before submitting.');

});

</script>

</body>

</html>

Feedback.css
body {

font-family: 'Outfit', sans-serif;

background-color: #1f252e;

height: 100vh;

color: #faf8f8;

header {

background-color: #1f252e;

border: 2px solid rgb(249, 252, 247);

height: 130px;

position: sticky;

top: 0;
z-index: 1000;

.container {

width: 45%;

margin: 20px auto;

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.feedback-form h1 {

margin-bottom: 18px;

background-color: ;

color: #333;

padding: 10px;

text-align: center;

border-bottom: 1px solid #ddd;

.feedback-form label {

display: block;

margin-bottom: 8px;

font-weight: bold;

color: #555;

.feedback-form input,

.feedback-form textarea {

width: 95%;
padding: 15px;

margin-bottom: 15px;

border: 2px solid #ccc;

border-radius: 5px;

.feedback-form button {

background-color: #6f56ee;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

text-decoration: none;

.feedback-form button:hover {

background-color: #742ded;

color: white;

text-decoration: underline;

.message {

text-align: center;

color: rgb(10, 4, 13);

font-weight: bold;

margin-top: 20px;

}
Feedback.php

<?php

// Enable error reporting

error_reporting(E_ALL);

ini_set('display_errors', 1);

// Database credentials

$servername = "localhost"; // change to your server name if needed

$username = "root"; // your database username

$password = ""; // your database password, if any

$dbname = "fitindia_db"; // your database name

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if the form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Get the form data

$name = $conn->real_escape_string($_POST['name']);

$email = $conn->real_escape_string($_POST['email']);

$feedback = $conn->real_escape_string($_POST['feedback']);
// Prepare and bind

$stmt = $conn->prepare("INSERT INTO feedback (name, email, feedback) VALUES (?, ?, ?)");

if (!$stmt) {

die("Prepare failed: " . $conn->error);

$stmt->bind_param("sss", $name, $email, $feedback);

// Execute the statement

if ($stmt->execute()) {

echo "Feedback submitted successfully!";

} else {

echo "Error: " . $stmt->error;

// Close the statement and connection

$stmt->close();

$conn->close();

} else {

echo "Invalid request method.";

?>

Subscriber.html
<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Forms</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Form 2: Newsletter Signup -->

<div class="form-container">

<h3>Sign Up for Our Newsletter</h3>

<form action="newsletter_signup.php" method="POST">

<input type="email" name="email" placeholder="Email Address" required>

<button type="submit" value="submit">Subscribe</button>

</form>

</div>

<!-- <script src="script.js"></script> -->

</body>

</html>

Subscriber.php
<?php

error_reporting(E_ALL);

ini_set('display_errors', 1);

$servername = "localhost";

$username = "root"; // Update if necessary

$password = ""; // Update if necessary


$dbname = "fitindia_db";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

die("Invalid email format.");

// Check if email already exists

$check_stmt = $conn->prepare("SELECT id FROM subscribers WHERE email = ?");

$check_stmt->bind_param("s", $email);

$check_stmt->execute();

$check_stmt->store_result();

if ($check_stmt->num_rows > 0) {

die("This email is already subscribed.");

}
$check_stmt->close();

// Insert email into the database

$stmt = $conn->prepare("INSERT INTO subscribers (email) VALUES (?)");

$stmt->bind_param("s", $email);

if ($stmt->execute()) {

echo "Subscription successful!";

} else {

echo "Error: " . $stmt->error;

$stmt->close();

$conn->close();

?>

Payment.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Payment Form</title>

<style>

body {
font-family: Arial, sans-serif;

text-align: center;

margin: 50px;

background-color: #ffcccb; /* Pink background */

color: black;

.container {

display: flex;

justify-content: center;

align-items: center;

.form-container {

display: flex;

flex-direction: column; /* Stack elements vertically */

background-color: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

width: 80%;

max-width: 400px; /* Adjusted width for better alignment */

.success-message {

display: none;

color: green;

font-size: 18px;

margin-top: 10px;

}
input, button {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box; /* Ensures padding is included in width */

button {

background-color: #ff69b4; /* Hot pink */

color: white;

border: none;

cursor: pointer;

font-weight: bold;

button:hover {

background-color: #ff1493; /* Darker hot pink on hover */

#qr-code {

margin-top: 20px;

h3 {

margin-bottom: 10px; /* Space below headings */

</style>

</head>

<body>
<h2>Payment Form</h2>

<div class="container">

<div class="form-container">

<h3>UPI Payment</h3>

<form action="../fit_india_proteins.html/payment.php" method="post">

<label for="name">Name:</label>

<input type="text" name="name" required>

<label for="upi_id">UPI ID:</label>

<input type="text" name="upi_id" required>

<h3>Scan QR Code for Payment</h3>

<div id="qr-code">

<img src="upi.png.png" alt="QR Code" id="qrImage" style="max-width: 100%; height:


auto;">

</div>

<button type="submit">Submit Payment</button>

</form>

</div>

</body>

</html>
Payment.php
<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "fitindia_db";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Validate input

$name = trim($_POST['name']);

$upi_id = trim($_POST['upi_id']);

if (empty($name) || empty($upi_id)) {

die("Name and UPI ID cannot be empty.");

// Prepare SQL statement

$stmt = $conn->prepare("INSERT INTO payments (name, upi_id) VALUES (?, ?)");

$stmt->bind_param("ss", $name, $upi_id);


// Execute the statement

if ($stmt->execute()) {

echo "<script>alert('Payment recorded successfully!');</script>";

} else {

echo "Error: " . $stmt->error;

// Close statement and connection

$stmt->close();

$conn->close();

?>

Productenquiry.html
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Forms</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Product Inquiry Form -->

<div class="form-container">
<h3>Product Inquiry Form</h3>

<form class="inquiry-form" action="product_enquiry.php" method="POST">

<div class="form-group">

<label for="name">Your Name</label>

<input type="text" id="name" placeholder="Enter your name"name="name" required>

</div>

<div class="form-group">

<label for="email">Email</label>

<input type="email" id="email" placeholder="Enter your email" name="email" required>

</div>

<div class="form-group">

<label for="product">Product Name</label>

<input type="text" id="product" placeholder="Enter product name" name="product"


required>

</div>

<div class="form-group">

<label for="message">Your Message</label>

<textarea id="message" placeholder="Write your message" name="message"


required></textarea>

</div>

<button type="submit" value="submit">Submit Inquiry</button>

</form>

</div>
<!-- <script src="script.js"></script> -->

</body>

</html>

Productenquiry.php
<?php

// Database connection details

$servername = "localhost"; // Change this if your database is hosted remotely

$username = "root"; // Update with your database username

$password = ""; // Update with your database password

$database = "fitindia_db"; // Replace with your actual database name

// Create connection

$conn = new mysqli($servername, $username, $password, $database);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Get form data

$name = trim($_POST['name']);

$email = trim($_POST['email']);

$product = trim($_POST['product']);
$message = trim($_POST['message']);

// Prepare SQL statement to prevent SQL injection

$stmt = $conn->prepare("INSERT INTO inquiries (name, email, product, message, created_at)


VALUES (?, ?, ?, ?, NOW())");

$stmt->bind_param("ssss", $name, $email, $product, $message);

// Execute the query

if ($stmt->execute()) {

echo "<script>alert('Your inquiry has been submitted successfully.');


window.location.href='index.html';</script>";

} else {

echo "<script>alert('Error submitting inquiry. Please try again.');


window.history.back();</script>";

// Close the statement

$stmt->close();

// Close the database connection

$conn->close();

?>

Samplerequest.html
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Forms</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Form 3: Product Sample Request -->

<div class="form-container">

<h3>Request a Free Sample</h3>

<form class="sample-form" action="sample_request.php" method="POST">

<input type="text" name="name" placeholder="Full Name" required>

<input type="email" name="email" placeholder="Email Address" required>

<input type="text" name="phone" placeholder="Phone Number">

<button type="submit">Request Sample</button>

</form>

</div>

</body>

</html>

Samplerequest.php
<?php

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Collect form data

$name = htmlspecialchars($_POST['name']);

$email = htmlspecialchars($_POST['email']);
$phone = htmlspecialchars($_POST['phone']);

// Database connection (adjust your credentials accordingly)

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "fitindia_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check for connection errors

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Prepare the SQL query to insert the form data into the database

$stmt = $conn->prepare("INSERT INTO sample_requests (name, email, phone) VALUES (?, ?, ?)");

$stmt->bind_param("sss", $name, $email, $phone);

// Execute the query

if ($stmt->execute()) {

echo "Sample request submitted successfully!";

} else {

echo "Error: " . $stmt->error;

// Close the connection


$stmt->close();

$conn->close();

?>

Samplereport

You might also like