Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bunny77K9
Bunny77K9 authored Dec 5, 2021
1 parent eabe0b3 commit 6a383bb
Showing 1 changed file with 392 additions and 0 deletions.
392 changes: 392 additions & 0 deletions HTML/BuyProducts.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../CSS/buyProductsStyles.css">

</head>
<body>
<!--implementing the main nav bar along with page navigation-->
<div class="navbar">
<img src="../Icons/lovesl.png" class="logo1" alt="logo">
<ul id="nav-list">
<li class="nav-list-element"><a href="Loading Home Page.html">Home</a></li>
<li class="nav-list-element"><a href="LoadingGallery.html">Gallery</a></li>
<li class="nav-list-element"><a href="LoadingQuiz.html">Quiz</a></li>
<li class="nav-list-element"><a href="LoadingSiteMap.html">Site Map</a></li>
<li class="nav-list-element"><a href="LoadingStudentDetails.html">About Us</a></li>
<li class="nav-list-element"><a href="LoadingQuery.html">Contact Us</a></li>
<div class="dropdown">
<button class="dropbtn">BOOKINGS ▼</button>
<div class="dropdown-content">
<a href="#">Book Now</a>
<a href="#datecount4">Products Store</a>
<a href="#datecount8">Personal Details</a>
<a href="#yourCart">My Cart</a>
<a href="#end">More</a>
</div>
</div>
</ul>
</div>

<br><br>
<h1 class="center" id="booking">BOOK NOW!</h1>
<p class="content">Hard to choose the best travel destination?</p>
<p class="content">We are here to help you...</p>

<!--Hotel images with details -->
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/28678336?guests=1&adults=1&s=39&unique_share_id=73fbc2d9-a165-427b-800e-61bbb907c364">
<img src="https://a0.muscache.com/im/pictures/6348f2ec-f860-47ba-a91e-23c7125e7460.jpg?im_w=720" alt="Paved Path" class="imageWidth">

</a>
<div class="desc">
<p>Name&nbsp;: Paved Path- Artist's Gallery</p>
<p>Location&nbsp;: Sri Jayawardena Pura</p>
<p>Price (per night)&nbsp;: $19</p>
<p>2 guests | 2 bedrooms | 3 beds </p>
<form>
<label for="datecount0">Select the number of nights :</label>
<select name="datecount0" id="datecount0">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" id="myBtn0" value="Book now" onclick="checkOptions0(this.form);" class="addtocart">
</form>
</div>
</div>
</div>


<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/41854689?guests=1&adults=1&s=39&unique_share_id=9d90df06-2d80-4262-b846-390c866b7a4a">
<img src="https://a0.muscache.com/im/pictures/90333f88-cc2d-4c7f-9c9a-c532f7309db7.jpg?im_w=1200" alt=" King Room" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Oriental King Room</p>
<p>Location &nbsp;: Kandy, Sri Lanka</p>
<p>Price (per night) &nbsp; : $19</p>
<p>2 guests | 1 bedroom | 1 bed </p>
<form>
<label for="datecount1">Select the number of nights :</label>
<select name="datecount1" id="datecount1">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn1" onclick="checkOptions1(this.form);" class="addtocart">
</form>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/32983879?guests=1&adults=1&s=39&unique_share_id=4333ec15-9bc1-454d-b6f0-d1f08b0485b7">
<img src="https://a0.muscache.com/im/pictures/c9a8c5fb-4db5-4d5c-871c-7489b5004e7f.jpg?im_w=960" alt="Villa Arali" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Villa Arali</p>
<p>Location &nbsp;: Hikkaduwa, Sri Lanka</p>
<p>Price (per night) &nbsp; : $120</p>
<p>5 guests | 3 bedrooms | 3 beds </p>
<form>
<label for="datecount2">Select the number of nights :</label>
<select name="datecount2" id="datecount2">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn2" class="addtocart" onclick="checkOptions2(this.form);">
</form>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/11304952?guests=1&adults=1&s=39&unique_share_id=b88ddd17-96d5-4637-ac30-8ada5efd2dfc">
<img src="https://a0.muscache.com/im/pictures/62e3f7aa-8944-4af4-99a3-6ec285826afa.jpg?im_w=720" alt="Moonstone Villa" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Moonstone Villa</p>
<p>Location &nbsp;: Galle, Sri Lanka</p>
<p>Price (per night) &nbsp; : $206</p>
<p>8 guests | 3 bedrooms | 5 beds </p>
<form>
<label for="datecount3">Select the number of nights :</label>
<select name="datecount3" id="datecount3">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn3" class="addtocart" onclick="checkOptions3(this.form);">
</form>
</div>
</div>
</div>


<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/35781824?guests=1&adults=1&s=39&unique_share_id=9cae05d3-b712-4911-ad8a-3b864fc24353">
<img src="https://a0.muscache.com/im/pictures/dcdeb342-21a6-4fd5-a5e5-422524f64bde.jpg?im_w=960" alt="Kikili Beach House" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Kikili Beach House</p>
<p>Location &nbsp;: Unawatuna</p>
<p>Price (per night) &nbsp; : $75</p>
<p>2 guests | 1 bedroom | 1 bed </p>
<form>
<label for="datecount4">Select the number of nights :</label>
<select name="datecount4" id="datecount4">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn4" class="addtocart" onclick="checkOptions4(this.form);">
</form>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/32754096?guests=1&adults=1&s=39&unique_share_id=bf1cbf54-e9c2-4451-9b86-43ad745e8d9d">
<img src="https://a0.muscache.com/im/pictures/ef3a9d92-4282-45c1-b3f8-9945501d60e3.jpg?im_w=960" alt="sl3" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Banyan Camp</p>
<p>Location &nbsp;: Uva, Sri Lanka</p>
<p>Price (per night) &nbsp; : $33</p>
<p>2 guests | 1 bedroom | 1 beds </p>
<form>
<label for="datecount5">Select the number of nights :</label>
<select name="datecount5" id="datecount5">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn5" class="addtocart" onclick="checkOptions5(this.form);">
</form>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/16045053?guests=1&adults=1&s=39&unique_share_id=0598d557-1ac5-4230-9ad7-7059c5bcda6b">
<img src="https://a0.muscache.com/im/pictures/2c9d1ffb-527b-4b40-b558-72a5a05d3be2.jpg?im_w=960" alt="sl" class="imageWidth">
</a>
<div class="desc" >
<p>Name &nbsp;: Girankiththa Eco</p>
<p>Location &nbsp;: Kithulgala</p>
<p>Price (per night) &nbsp; : $28</p>
<p>4 guests | 1 bedroom | 2 beds </p>
<form>
<label for="datecount6">Select the number of nights :</label>
<select name="datecount6" id="datecount6">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn6" class="addtocart" onclick="checkOptions6(this.form);">
</form>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://www.airbnb.com/rooms/16538062?guests=1&adults=1&s=39&unique_share_id=02fa156e-883d-452e-a9c2-3d6fbdad4726">
<img src="https://a0.muscache.com/im/pictures/f2705194-6b30-4dee-83e5-d2a8beb939bb.jpg?im_w=1440" alt="sl" class="imageWidth">
</a>
<div class="desc">
<p>Name &nbsp;: Mercedes Lodge</p>
<p>Location &nbsp;: Monaragala, Sri Lanka</p>
<p>Price (per night) &nbsp; : $35</p>
<p>2 guests | 1 bedroom | 1 bed </p>
<form>
<label for="datecount7">Select the number of nights :</label>
<select name="datecount7" id="datecount7">
<option value="1">1 night</option>
<option value="2">2 nights</option>
<option value="3">3 nights </option>
<option value="4">4 nights</option>
</select>
<br><br>
<input type="button" value="Book now" id="myBtn7" class="addtocart" onclick="checkOptions7(this.form);">
</form>
</div>
</div>
</div>
<br>
<br>

<!--Products images and details-->
<h1 class="center" id="productStore">Product Store</h1>

<div class="responsive">
<div class="card">
<img src="https://cdn-fsly.yottaa.net/55df7e1a2bb0ac7d800040c2/www.containerstore.com/v~4b.116/catalogimages/403149/10080956-Maxporter-Trunk-Spinner-VEN.jpg?width=600&height=600&align=center&yocs=2C_4c_2E_2H_" alt="luggage" class="imageWidth2" >
<h1> Maxporter Trunk Spinner</h1>
<p class="price">$200.64</p>
<p>Like a trunk on wheels, this Maxporter luggage is designed for less strain, more security while you travel..</p>
<form>
<label for="datecount8">Select amount :</label>
<select name="datecount8" id="datecount8">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
</select>
<br><br>
<input type="button" value="Add to Cart" id="myBtn8" class="addtocart" onclick="checkOptions8(this.form);">
</form>
</div>
</div>
<div class="responsive">
<div class="card">
<img src="https://cdn-fsly.yottaa.net/55df7e1a2bb0ac7d800040c2/www.containerstore.com/v~4b.116/catalogimages/391356/10081009-seat-pack-PVL.jpg?width=600&height=600&align=center&yocs=2C_4c_2E_2H_" alt="luggage" class="imageWidth2" >
<h1>Seat Pack Organizer</h1>
<p class="price">$15.00</p>
<p>It's slim and light yet this travel pouch packs tons of organizing features into one rugged design.</p>
<form>
<label for="datecount9">Select amount :</label>
<select name="datecount9" id="datecount9">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
</select>
<br><br>
<input type="button" value="Add to Cart" id="myBtn9" class="addtocart" onclick="checkOptions9(this.form);">
</form>
</div>
</div>
<div class="responsive">
<div class="card">
<img src="https://cdn-fsly.yottaa.net/55df7e1a2bb0ac7d800040c2/www.containerstore.com/v~4b.116/catalogimages/393364/10082379-Wood-Hammer-Mutli-Tool-VEN3.jpg?width=600&height=600&align=center&yocs=2C_4c_2E_2H_" alt="luggage" class="imageWidth2" >
<h1>Kikkerland Multi-Tool</h1>
<p class="price">$20.44</p>
<p>This 10-in-1 multi-tool is ready to help with quick fixes, DIY projects and everyday tasks around the house.</p>
<form>
<label for="datecount10">Select amount :</label>
<select name="datecount10" id="datecount10">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
</select>
<br><br>
<input type="button" value="Add to Cart" id="myBtn10" class="addtocart" onclick="checkOptions10(this.form);">
</form>
</div>
</div>
<div class="responsive">
<div class="card">
<img src="https://cdn-fsly.yottaa.net/55df7e1a2bb0ac7d800040c2/www.containerstore.com/v~4b.116/catalogimages/359139/10074623-cabeau-evolution-memory-foa.jpg?width=1200&height=1200&align=center&yocs=2C_4c_2E_2H_" alt="luggage" class="imageWidth2" >
<h1>Cabeau Evolution Neck Pillow</h1>
<p class="price">$30.45</p>
<p>Arrive rested and refreshed when you travel with this super-soft Memory Foam Neck Pillow. </p>
<form>
<label for="datecount11">Select amount :</label>
<select name="datecount11" id="datecount11">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
</select>
<br><br>
<input type="button" value="Add to Cart" id="myBtn11" class="addtocart" onclick="checkOptions11(this.form);">
</form>
</div>
</div>


<!--Personal details form-->
<form name="personal" class="DetailsContainer" id="personal">
<div>
<div class="content">
<h2>Personal Details</h2>
<label for="fname" class="name">Full name &nbsp;&nbsp; :</label>
<input type="text" id="fname" name="fname" class="input" placeholder="Jon Snow" required><br><br>
<label for="contact" class="contact">Contact &nbsp;&nbsp;&nbsp; :</label>
<input type="text" id="contact" name="contact" class="input" placeholder="012 3456789" required><br><br>
<label for="mail" class="email"> Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :</label>
<input type="text" id="mail" name="email" class="input" placeholder="[email protected]">
<br><br>
</div>
</div>
</form>

<!--My cart-->
<div class="yourcart" id="cart">
<div class="cartheading">
<h1 id="yourCart"> My Cart <image src="../Icons/cart2.jpg" class="logoCart" alt="logocart"></image></h1>
</div>
<div class="right">
<p id="price0"> </p>
<p id="price1"> </p>
<p id="price2"> </p>
<p id="price3"> </p>
<p id="price4"> </p>
<p id="price5"> </p>
<p id="price6"> </p>
<p id="price7"> </p>
<p id="price8"> </p>
<p id="price9"> </p>
<p id="price10"> </p>
<p id="price11"> </p>
</div>
<br><br><br><br><br>
<input type="button" value="Clear cart" id="clear" class="addtocart" onclick="clearCart();">
<p> </p>
<input type="button" value="---Proceed to checkout---" id="checkOut" class="addtocart" onclick="totalBill(); personalDetails();">

<p>-----------------------------------------------------------------------------------------------------------------</p>
<h3>Personal Details</h3>
<p id="name"> </p>
<p id="mycontact"> </p>
<p id="email"> </p>
<p>-----------------------------------------------------------------------------------------------------------------</p>

<div class="cartTotal">
<p id="totalbill"> </p>
</div>
</div>


<!--Description-->
<div class="description">
<br>
<br>
<p id="end">Travel... the best place to be lost and found at the same time.
~Brenna Smith</p>
<p>Thank You for choosing TRAVIARE. Have a nice Journey !!</p>
<img src="../Icons/lovesl.png" class="logo" alt="logo">

</div>


</body>
<script src="../Java Script/BuyProductsScript.js"> </script>
</html>

0 comments on commit 6a383bb

Please sign in to comment.