PricingBlogAbout Us

Developing Interactive Tourism Website Using HTML, CSS, JavaScript

Verified

Added on  2023/06/10

|44
|9728
|199
Practical Assignment
AI Summary
This assignment provides the HTML, CSS, and JavaScript code for a multi-page website designed for a B&B tourism company in Malaysia. The website includes an index page with a responsive navigation bar and image carousel, a destinations page showcasing images in a grid layout, a contact us page with company information and a Google Maps integration, an about us page providing details about the company, and a current offers page. The code incorporates responsive design principles using CSS media queries and JavaScript to ensure optimal viewing across various devices. The website also features a consistent footer with links to important pages, support resources, legal information, and social media profiles. This document is available on Desklib, a platform offering a wealth of study resources including past papers and solved assignments to assist students in their academic endeavors.
Document Page
Code for Index page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
/* inclusion of the different css files and java script files required for the
designing of the pages. */
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="RstyleSheet.css" />
<script>
/* script for the automated animation of the slides ono the pages */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* container for the Carousel */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption for carousel images */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Numbering of the slides in the carousel */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
position: absolute;
top: 0;
}
/* The indicators on the carousel */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* CSS code for the animation of the Carousel */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: .5s;
animation-name: fade;
animation-duration: .5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .2}
to {opacity: .2}
}
/* For smaller screen sizes the following css code decreases size of the text
*/
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<!--Following section is for the responsive nav bar on the webpages---->
<div class="topnav" id="myTopnav">
<a href="Index.aspx" class="active">Home</a>
<a href="Destination.aspx">Destinations</a>
<a href="Coffers.aspx">Current Offers</a>
<a href="Aboutus.aspx">About us</a>
<a href="Contactus.aspx">Contact us</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--Following section is for the carousel on the page to make it
attractive on the webpages---->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="unspl1.jpg" style=" height:25%; width:100%">
Document Page
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="unspl2.jpg" style=" height:25%; width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="unspl3.jpg" style="height:25%; width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="w3-container w3-blue">
<h1>Malyasia</h1>
<p>Truely Asia</p>
<p>
. </p>
</div>
<!--Following are the footer part of the pages to make it attractive on the
webpages---->
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>B &B : Explore Malyasia</h5>
<ul>
<li><a href="Index.aspx">Home</a></li>
<li><a href="Contactus.aspx">Contact us</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>

⊘ This is a preview!⊘

Do you want full access?

icon

Trusted by 1+ million students worldwide

Document Page
</div>
<!-- The following section contains Embeded google map show
Google Maps on the page. -->
<iframe id="map-container" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d127484.37823478147!2d101.66089399270611!3d3.1246197586718085!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49c701efeae7%3A0xf4d98e5b2f1c287d!
2sKuala+Lumpur%2C+Federal+Territory+of+Kuala+Lumpur%2C+Malaysia!5e0!3m2!1sen!
2sin!4v1532935509630" width="600" height="450">
</iframe>
</div>
<div class="social-networks">
<a href="https://Twitter.com" class="twitter"><i class="fa fa-
twitter"></i></a>
<a href="https://facebook.com" class="facebook"><i class="fa fa-
facebook-official"></i></a>
<a href="https://Gmail.com" class="google"><i class="fa fa-google-
plus"></i></a>
</div>
<div class="footer-copyright">
<p>© 2018 Copyright Reserved by Nick Tourism </p>
</div>
</footer>
<script>
<!----Script for the carousel animation on the pages--->
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>
<-- end of Script--
</body>
-----End of body section on he pages---
</html>
Code for Destination page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Destination.aspx.cs"
Inherits="Destination" %>
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="RstyleSheet.css" />
<link rel="stylesheet" href="Gallery.css" />
<script>
/* following code is for making the nav bar responsive*/
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* For IE10 browsers */
display: flex;
-ms-flex-wrap: wrap; /* For IE10 browsers */
flex-wrap: wrap;
padding: 0 4px;
}
/* Creating four equal columns to make a photo grid */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout for two column-layout */
@media screen and (max-width: 800px) {
Document Page
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout of the photogrid to make a two column stack */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<!--Following code is for the responsive nav bar ---->
<div class="topnav" id="myTopnav">
<a href="Index.aspx" class="active">Home</a>
<a href="Destination.aspx">Destinations</a>
<a href="Coffers.aspx">Current Offers</a>
<a href="Aboutus.aspx">About us</a>
<a href="Contactus.aspx">Contact us</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="header">
<h1>Few of the Most Desirable Destinations</h1>
<p>Come and feel the Nature with Best in Class Hospitality </p>
</div>
<!—Following section contains the code for the GRID of images of different
destination in the -->
<div class="row">
<div class="column">
<img src="/unspl1.jpg" style="width:100%">
<img src="/unspl3.jpg" style="width:100%">
<img src="/unspl4.jpg.jpg" style="width:100%">
</div>
<div class="column">
<img src="/pic04.jpg" style="width:100%">
<img src="/pic01.jpg" style="width:100%">
<img src="/pic03.jpg" style="width:100%">
</div>
<div class="column">
<img src="/pic02.jpg" style="width:100%">
<img src="/car1.jpg" style="width:100%">
<img src="/car2.jpg" style="width:100%">
</div>
<div class="column">
<img src="/unspl2.jpg" style="width:100%">
<img src="/pic05.jpg" style="width:100%">
<img src="/pic04.jpg" style="width:100%">

⊘ This is a preview!⊘

Do you want full access?

icon

Trusted by 1+ million students worldwide

Document Page
</div>
</div>
<div>
</div>
--Following section is for the footer of the pages-
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>B &B : Explore Malyasia</h5>
<ul>
<li><a href="Index.aspx">Home</a></li>
<li><a href="Contactus.aspx">Contact us</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<!-- Here the Google Embed API is used to show Google Maps. -->
<iframe id="map-container" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d127484.37823478147!2d101.66089399270611!3d3.1246197586718085!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49c701efeae7%3A0xf4d98e5b2f1c287d!
2sKuala+Lumpur%2C+Federal+Territory+of+Kuala+Lumpur%2C+Malaysia!5e0!3m2!1sen!
2sin!4v1532935509630" width="600" height="450">
</iframe>
</div>
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
<div class="social-networks">
<a href="https://Twitter.com" class="twitter"><i class="fa fa-
twitter"></i></a>
<a href="https://facebook.com" class="facebook"><i class="fa fa-
facebook-official"></i></a>
<a href="https://Gmail.com" class="google"><i class="fa fa-google-
plus"></i></a>
</div>
<div class="footer-copyright">
<p>© 2018 Copyright Reserved by Nick Tourism </p>
</div>
</footer>
</body>
</html>
Contact us page code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contactus.aspx.cs"
Inherits="Contactus" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="RstyleSheet.css" />
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
Document Page
/* Caption */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number on the carousel */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* animation effect for the mcarousel */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* for smaller screens to decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.iscontainer {
position: relative;
font-family: Arial;
}

⊘ This is a preview!⊘

Do you want full access?

icon

Trusted by 1+ million students worldwide

Document Page
.istext-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="Index.aspx" class="active">Home</a>
<a href="Destination.aspx">Destinations</a>
<a href="Coffers.aspx">Current Offers</a>
<a href="Aboutus.aspx">About us</a>
<a href="Contactus.aspx">Contact us</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
<div class="iscontainer">
<img src="unspl4.jpg" alt="Nature" style="height:50%;
width:100%; ">
<div class="istext-block">
<h4>About us</h4>
<p>B and B tourism is the Subsidiary of Nicktourism which is
providing afforadble tourism packages to the tourists in Malyasia and
Kualalum</p>
<p>Mail Us at:</p>
<p>Nicktours@gmail.com</p>
<p>Reach Us at:</p>
<p>324-5566-1455</p>
</div>
</div>
</div>
---footer section of the pages-
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>B &B : Explore Malyasia</h5>
<ul>
<li><a href="Index.aspx">Home</a></li>
<li><a href="Contactus.aspx">Contact us</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li><a href="FAQ.html">FAQ</a></li>
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<!-- Here Google Embeded map is used to show Google Maps. -->
<iframe id="map-container" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d127484.37823478147!2d101.66089399270611!3d3.1246197586718085!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49c701efeae7%3A0xf4d98e5b2f1c287d!
2sKuala+Lumpur%2C+Federal+Territory+of+Kuala+Lumpur%2C+Malaysia!5e0!3m2!1sen!
2sin!4v1532935509630" width="600" height="450">
</iframe>
</div>
<div class="social-networks">
<a href="https://Twitter.com" class="twitter"><i class="fa fa-
twitter"></i></a>
<a href="https://facebook.com" class="facebook"><i class="fa fa-
facebook-official"></i></a>
<a href="https://Gmail.com" class="google"><i class="fa fa-google-
plus"></i></a>
</div>
<div class="footer-copyright">
<p>© 2018 Copyright Reserved by Nick Tourism </p>
</div>
</footer>
</body>
</html>
About us page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Aboutus.aspx.cs"
Inherits="Aboutus" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<Inclusion of style sheets and jquery plugins--->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="RstyleSheet.css" />
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
Document Page
x.className = "topnav";
}
}
</script>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number*/
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* animation of the carousel */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}

⊘ This is a preview!⊘

Do you want full access?

icon

Trusted by 1+ million students worldwide

chevron_up_icon
1 out of 44
circle_padding
hide_on_mobile
zoom_out_icon
logo.png

Your All-in-One AI-Powered Toolkit for Academic Success.

  +13062052269
info@desklib.com

Available 24*7 on WhatsApp / Email

[object Object]
Unlock your academic potential

Copyright © 2020–2025 A2Z Services. All Rights Reserved. Developed and managed by ZUCOL.