Babi HTML

CODE 1
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping App</title>
</head>
<body>
<header>
<h1>Online Shopping App</h1>
</header>
<nav>
<ul>
<li><a href="#featured">Featured Products</a></li>
<li><a href="#categories">Product Categories</a></li>
</ul>
</nav>
<main>
<section id="featured">
<h2>Featured Products</h2>
<ul>
<li>
<h3>Product 1</h3>
<p>Description of product 1</p>
<button>Add to Cart</button>
</li>
<li>
<h3>Product 2</h3>
<p>Description of product 2</p>
<button>Add to Cart</button>
</li>
</ul>
</section>
<section id="categories">
<h2>Product Categories</h2>
<ul>
<li><a href="#">Category 1</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Online Shopping App</p>
</footer>
</body>
</html>
CODE2
<!DOCTYPE html>
<html>
<head>
<title>My Daraz Store</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to My Daraz Store</h1>
<p>Check out our latest products:</p>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</main>
<footer>
<p>Copyright © My Daraz Store 2023</p>
</footer>
</body>
</html>
CODE 3
<a href="https://wa.me/+1234567890?text=Hi%20there">Click here to send a message on
WhatsApp</a>
CODE 4
<a href="https://wa.me/+1234567890?text=Hi%20there">Click here to send a message on
WhatsApp</a>
CODE 5
<a href="https://wa.me/[phone number with country code]?text=[message]">Click here to send a

message on WhatsApp</a>
CODE 6ADD TO CART

<form action="add_to_cart.php" method="post">
<input type="hidden" name="product_id" value="12345">
<input type="submit" value="Add to Cart">
</form>
<button type="button">Add to Cart</button>

CODE 7
<!DOCTYPE html>
<html>
<head>
<title>Tyre Shop</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Tyre Shop</h1>
<nav>
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="services">
<h2>Our Services</h2>
<p>We offer a wide range of services for all your tyre needs, including tyre fitting, balancing, and
puncture repair. Our experienced technicians are equipped with the latest tools and equipment to
ensure that your vehicle is in safe hands.</p>
</section>
<section id="products">
<h2>Our Products</h2>
<p>We stock a wide range of tyres from the leading brands, including summer, winter, and all-
season tyres. Whether you need tyres for your car, van, or 4x4, we have a solution that is right for
you.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>We are a locally owned and operated tyre shop, dedicated to providing high-quality services
and products at competitive prices. With years of experience, we have built a reputation for
reliability, and our goal is to make your experience as smooth and stress-free as possible.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Got any queries or need to book an appointment? Please don't hesitate to get in touch with
us:</p>
<ul>
<li>Phone: +1-555-555-5555</li>
<li>Email: info@tyreshop.com</li>
<li>Address: 123 Main Street, Anytown USA</li>
</ul>
</section>
</main>
<footer>
<p>Copyright © Tyre Shop 2023</p>
</footer>
</body>
</html>
Code 8
<!DOCTYPE html>
<html>
<head>
<title>Online Tyre Sale</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Online Tyre Sale</h1>
<nav>
<ul>
<li><a href="#tyres">Tyres</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#delivery">Delivery Information</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="tyres">
<h2>Our Tyres</h2>
<p>We offer a wide range of high-quality tyres from the leading brands, including summer,
winter, and all-season tyres. Use our easy-to-use tyre finder to search for the right tyres for your
vehicle and have them delivered straight to your door.</p>
<form action="tyre-finder.php" method="post">
<label for="vehicle-make">Vehicle Make:</label>
<input type="text" id="vehicle-make" name="vehicle-make" required>
<label for="vehicle-model">Vehicle Model:</label>
<input type="text" id="vehicle-model" name="vehicle-model" required>
<label for="tyre-size">Tyre Size:</label>
<input type="text" id="tyre-size" name="tyre-size" required>
<input type="submit" value="Find Tyres">
</form>
</section>
<section id="about">
<h2>About Us</h2>
<p>We are an online tyre retailer, dedicated to providing high-quality tyres at competitive prices.
With a wide range of products and fast, reliable delivery, we make it easy for you to get the tyres
you need, when you need them.</p>
</section>
<section id="delivery">
<h2>Delivery Information</h2>
<p>We offer fast, reliable delivery to your door, with no hidden fees. Our delivery charges are
calculated based on your location and the size and weight of your order. To see our delivery charges,
simply add your items to your cart and enter your postcode at checkout.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Got any queries or need assistance with your order? Please don't hesitate to get in touch with
us:</p>
<ul>
<li>Phone: +1-555-555-5555</li>
<li>Email: info@onlinetyresale.com</li>
<li>Live Chat: Available 9am-5pm, Monday to Friday</li>
</ul>
Code 9
<!DOCTYPE html>
<html>
<head>
<title>Online Tyre Shop</title>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.header h1 {
margin: 0;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eee;
padding: 20px;
}
.navigation a {
color: #333;
text-decoration: none;
margin-right: 20px;
}
.tire-list {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.tire-card {
width: 30%;
background-color: #fff;
border: 1px solid #333;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.tire-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.tire-card h2 {
margin-top: 20px;
}
.tire-card p {
margin-top: 10px;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>
<div class="header">
<h1>Online Tyre Shop</h1>
</div>
<div class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="tire-list">
<div class="tire-card">
<img src="https://via.placeholder.com/500x200" alt="Tire 1">
<h2>Tire 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida
pellentesque urna varius vitae.</p>
</div>
<img src="https://via.placeholder.com/500x200" alt="Tire 2">
<h2>Tire 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida
pellentesque urna varius vitae.</p>
</div>
<img src="https://via.placeholder.com/
CODE 10
<!DOCTYPE html>
<html>
<head>
<style>
.tyre-card {
width: 300px;
height: 400px;
background-color: white;
border: 1px solid black;
box-shadow: 2px 2px 5px grey;
display: flex;
flex-direction: column;
margin: 10px;
}
.tyre-image {
width: 80%;
height: 200px;
margin: 10px 0;
}
.tyre-info {
width: 80%;
text-align: center;
}
.tyre-brand {
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
}
.tyre-price {
font-size: 18px;
color: green;
margin-bottom: 5px;
}
.tyre-button {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="tyre-card">
<img class="tyre-image" src="tyre-1.jpg" alt="Tyre Image">
<div class="tyre-info">
<div class="tyre-brand">Brand Name</div>
<div class="tyre-price">$100</div>
<div class="tyre-button">Add to Cart</div>
</div>
</div>
</body>
</html>
Code 10
<!DOCTYPE html>
<html>
<head>
<style>
.tyre-card {
width: 300px;
height: 400px;
background-color: white;
box-shadow: 2px 2px 5px grey;
display: flex;
flex-direction: column;
margin: 10px;
}
.tyre-image {
width: 80%;
height: 200px;
margin: 10px 0;
}
.tyre-info {
width: 80%;
text-align: center;
}
.tyre-brand {
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
}
.tyre-price {
font-size: 18px;
color: green;
margin-bottom: 5px;
}
.tyre-button {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="tyre-card">
<img class="tyre-image" src="tyre-1.jpg" alt="Tyre Image">
<div class="tyre-info">
<div class="tyre-brand">Brand Name</div>
<div class="tyre-price">$100</div>
<div class="tyre-button">Add to Cart</div>
</div>
</div>
</body>
</html>
Code 11
<?php
$phone = "1234567890";
$link = "https://wa.me/" . $phone;
echo "<a href='" . $link . "'>Start Chat on WhatsApp</a>";
?>
Code12
const products = [
{ name: "product1", price: 25 },
{ name: "product2", price: 35 },
{ name: "product3", price: 45 }
];
let cart = [];
function displayProducts() {
let productList = "";
products.forEach(function(product) {
productList += `<li>${product.name} - $${product.price} <button onclick="addToCart('$
{product.name}')">Add to Cart</button></li>`;
});
document.getElementById("products").innerHTML = productList;
}
function addToCart(name) {
let product = products.find(function(product) {
return product.name === name;
});
cart.push(product);
displayCart();
}
function displayCart() {
let cartList = "";
cart.forEach(function(product) {
cartList += `<li>${product.name} - $${product.price}</li>`;
});
document.getElementById("cart").innerHTML = cartList;
}
displayProducts();
Code 13
Html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="product-list">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>$10</p>
<button class="add-to-cart-btn">Add to Cart</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>$20</p>
<button class="add-to-cart-btn">Add to Cart</button>
</div>

</div>
<div id="cart">
<h2>Cart</h2>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody id="cart-items">
</tbody>
</table>
<p id="total"></p>
</div>
<script src="app.js"></script>
</body>
</html>
Css
body {
font-family: Arial, sans-serif;
}
#product-list {
display: flex;
flex-wrap: wrap;
}
.product {
width: 30%;
text-align: center;
}
#cart {
width: 30%;
margin: 20px auto;
text-align: left;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
}
th {
background-color: lightgray;
}
button {
background-color: lightblue;
color: white;
padding: 8px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Java
const productList = document.querySelector("#product-list");

const cartItems = document.querySelector("#cart-items");
const total = document.querySelector("#total");
let cart = [];
productList.addEventListener("click", function(event) {
if (event.target.classList.contains("add-to-cart-btn")) {
const product = event.target.parentElement;
const title = product.querySelector("h3").textContent;
const price = product.querySelector("p").textContent;
addToCart(title, price);
Code 15
HTML Form
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Document</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
" rel="stylesheet"
id="bootstrap-css" />
<style>
.register .nav-tabs .nav-link:hover {
border: none;
}
.text-align {
margin-top: -3%;
margin-bottom: -9%;
padding: 10%;
margin-left: 30%;
}
.form-new {
margin-right: 22%;
margin-left: 20%;
}
.register-heading {
margin-left: 21%;
margin-bottom: 10%;
color: #e9ecef;
}
.register-heading h1 {
margin-left: 21%;
margin-bottom: 10%;
color: #e9ecef;
}
.register {
background: -webkit-linear-gradient(left, #055a4f, #00c6ff);
margin-top: 3%;
padding: 3%;
border-radius: 2.5rem;
}
.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #03612e;
border: none;
cursor: pointer;
margin-right: 6%;
color: rgb(246, 246, 252);
margin-top: 4%;
}
</style>
</head>
<body>
<div class="container register">
<div class="row">
<div class="col-md-12">
<div class="tab-pane fade show active text-align form-new"
id="home" role="tabpanel"
aria-labelledby="home-tab">
<h3 class="register-heading text-nowrap">HTML Form to
WhatsApp</h3>
<div class="row register-form">
<div class="col-md-12">
<form autocomplete="off">
<div class="form-group">
<input type="text" name="Name"
id="name" class="form-control"
placeholder="Your Name *" value=""
required="" />
</div>
<input type="text" name="Email"
id="email" class="form-control"
placeholder="Your Email *" value=""
required="" />
</div>
<input type="number" name="Phone"
id="phone" class="form-control"
placeholder="Your Contact Number *"
value="" required="" />
</div>
<select class="form-control"
id="service">
<option>Default select</option>
<option>Website
Development</option>
<option>Mobile App
Development</option>
<option>Web and Mobile
Application</option>
</select>
</div>
<input type="button" name="submit"
class="btnSubmit btn-block" onclick="gotowhatsapp()" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"><
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></
script>
<script>
function gotowhatsapp() {
var name = document.getElementById("name").value;

var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var service = document.getElementById("service").value;
var url = "https://wa.me/918789529215?text="

+ "Name: " + name + "%0a"
+ "Phone: " + phone + "%0a"
+ "Email: " + email + "%0a"
+ "Service: " + service;
window.open(url, '_blank').focus();
}
</script>
</body>
</html>
WhatsApp Floating Button

<a href="https://wa.me/918789529215?text=Hi%20There!"
class="float"
style="
position: fixed;
width: 50px;
height: 50px;
bottom: 70px;
right: 120px;
color: #fff;
border-radius: 50px;
text-align: center;
cursor: pointer;
box-shadow: 2px 2px 3px #999;
"
>
<img
src="https://trickuweb.com/whatsapp.png"
alt=""
height="60px"
width="60px"
/>
</a>
Javascript Code For Sending Form

Data To WhatsApp
<script>
function gotowhatsapp() {
var name = document.getElementById("name").value;

var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var service = document.getElementById("service").value;
var url = "https://wa.me/918789529215?text="

+ "Name: " + name + "%0a"
+ "Phone: " + phone + "%0a"
+ "Email: " + email + "%0a"
+ "Service: " + service;
window.open(url, '_blank').focus();
}
</script>

Babi HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Babi HTML

Uploaded by

Copyright:

Available Formats

CODE 1

<a href="https://wa.me/[phone number with country code]?text=[message]">Click here to send a

CODE 6ADD TO CART

<button type="button">Add to Cart</button>

let cart = [];

const productList = document.querySelector("#product-list");

let cart = [];

var name = document.getElementById("name").value;

var url = "https://wa.me/918789529215?text="

WhatsApp Floating Button

Javascript Code For Sending Form

var name = document.getElementById("name").value;

var url = "https://wa.me/918789529215?text="

You might also like