Scribd
Upload
15 views25 pages

Lab 1 Code Written Without Style and Output Minimised Cropped FINAL Main - HTML Videoplay - Js 24 Pages

The document outlines the design and implementation of a travel booking website using HTML and CSS, featuring various sections such as a header, navigation links, video tour, subscription form, and a showcase of travel destinations. It includes interactive elements like dropdown menus and buttons for adding items to an order, along with social media links. The website aims to provide users with an engaging experience while exploring travel options and booking tickets.

Uploaded by

anikeit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views25 pages

Lab 1 Code Written Without Style and Output Minimised Cropped FINAL Main - HTML Videoplay - Js 24 Pages

The document outlines the design and implementation of a travel booking website using HTML and CSS, featuring various sections such as a header, navigation links, video tour, subscription form, and a showcase of travel destinations. It includes interactive elements like dropdown menus and buttons for adding items to an order, along with social media links. The website aims to provide users with an engaging experience while exploring travel options and booking tickets.

Uploaded by

anikeit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Objective 1: Design and implementation of web pages using HTML

and integrate them using hyperlinks

CODE – Main.html
1 - 38
<!DOCTYPE html>
<html>
<head>
<style>
.
.
.
</style>

<link rel="stylesheet" href="50 Simple website using html and css.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudfcflare.com/ajax/libs/font-
awesome/6.1.1/css/all.min.css"
/>

</head>
612 – 649

<body>

<div class="header">
<h1> Travel Booking website </h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB3CSS(responsive accordion)\index.html"> Responsive
accordion Pure CSS </a>
<a href="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB3TABLESANDFORMS.html" style="float:right"> Book a ticket
using Tables and Forms</a>
<a href="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1CV\index.html">See the CV of the Owner</a>
<a href="#footer"> footer </a>
</div>

<!--==================== VIDEO ====================-->


<section class="video section">
<h2 class="section__title">Video Tour</h2>
<div class="video__container container">
<p class="video__description">Find out more with our video of the
most beautiful and
pleasant places for you and your family.
</p>

<div class="video__content">
<video id="video-file">
<source src="ANIKEITBAGARIALAB1website\video.mp4"
type="video/mp4">
</video>

<button class="button button--flex video__button" id="video-


button">
<i class="ri-play-line video__button-icon" id="video-
icon"></i>
</button>
</div>
</div>
</section>
650 – 673

<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>SUBSCRIBE</h2>
<h5>Subscription, Feb, 2023 </h5>
<div class="subscribe__bg">
<div class="subscribe__container container">
<h2 class="section__title subscribe__title">Subscribe Our
<br> Newsletter</h2>
<p class="subscribe__description">Subscribe to our
newsletter and get a special 30% discount.
</p>

<form action="" class="subscribe__form">


<input type="text" placeholder="Enter email"
class="subscribe__input">

<button class="button">
Subscribe
</button>
</form>
</div>
</div>
</div>
<div class="card">
<h2><center> With our experience we will serve you </center>
674 – 708

<!--==================== EXPERIENCE ====================-->


<section class="experience section">
<h2 class="section__title">With Our Experience <br> We Will Serve
You</h2>

<div class="experience__container container grid">


<div class="experience__content grid">
<div class="experience__data">
<h2 class="experience__number">20</h2>
<span class="experience__description">Year <br>
Experience</span>
</div>

<div class="experience__data">
<h2 class="experience__number">75</h2>
<span class="experience__description">Complete <br>
tours</span>
</div>

<div class="experience__data">
<h2 class="experience__number">650+</h2>
<span class="experience__description">Tourist <br>
Destination</span>
</div>
</div>

<div class="experience__img grid">


<div class="experience__overlay">
<img src="assets/img/experience1.jpg" alt=""
class="experience__img-one">
</div>

<div class="experience__overlay">
<img src="assets/img/experience2.jpg" alt=""
class="experience__img-two">
</div>
</div>
</div>
</section>
</div>
709 – 749

<div class="card">
<h3>Follow Me</h3>
<div>
<a href="https://www.facebook.com/" target="_blank"
class="footer__social">
<i class="ri-facebook-box-fill"></i>
</a>
<a href="https://twitter.com/" target="_blank"
class="footer__social">
<i class="ri-twitter-fill"></i>
</a>
<a href="https://www.instagram.com/" target="_blank"
class="footer__social">
<i class="ri-instagram-fill"></i>
</a>
<a href="https://www.youtube.com/" target="_blank"
class="footer__social">
<i class="ri-youtube-fill"></i>
</a>
</div>
</div>
</div>
</div>

<div class="dropdown">
<span>Mouse over me (Simple hover text) </span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

<div class="dropdown2">
<button class="dropbtn2">Dropdown2</button>
<div class="dropdown2-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<br> <br> <br> <br> <br>

<section id="main">
<h1>Places you can visit</h1>
<p>Go to <a href="#">Here is a list of places you can visit</p>
750 – 785
<section id="items">
<div class="menuItem">
<input class="addButton" type="button" value="Add" />
<div id="item0" >
<a target = "blank" href =
"C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\place1.jpg">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place1.jpg" alt="Bali">
</a>
<h1> Bali </h1>
<p> Indonesia </p>
<p> Price: $4,000 </p>
<div class = "rating"> 5.0 </div>
</div>
</div>
<div class="menuItem">
<input class="addButton" type="button" value="Add to Order" />
<div id="item1" >
<a target = "blank" href =
"C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\place2.jpg"></a>
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place2.jpg" alt="Bora bora" />
</a>
<h1> Bora Bora </h1>
<p> Polinesia </p>
<p> Price: $5,000 </p>
</div>
</div>
<div class="menuItem">
<input class="addButton" type="button" value="Add to Order" />
<div id="item2" >
<a target = "blank" href =
"C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\place3.jpg"></a>
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place3.jpg" alt="Hawaii" />
</a>
<h1> Hawaii </h1>
<p> EE.UU. </p>
<p> Price: $6,000 </p>
</div>
</div>
786 – 809
<div class="menuItem">
<input class="addButton" type="button" value="Add to order" />
<div id="item3" >
<a target = "blank" href =
"C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\place4.jpg">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place4.jpg" alt="salami_baguette" />
</a>
<h1> Whitehaven </h1>
<p> Australia </p>
<p> Price: $5,000 </p>
</div>
</div>
<div class="menuItem">
<input class="addButton" type="button" value="Add to Order" />
<div id="item4" >
<a target = "blank" href =
"C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\place5.jpg"></a>
<img src= "C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place5.jpg" alt="ham_bagel"
/>
</a>
<h1> Hvar </h1>
<p> Coachia </p>
<p> Price: $9,000 </p>
</div>
</div>

</section>
810 – 860
<!--==================== PLACES ====================-->
<section class="place section" id="place">
<h2 class="section__title">Choose Your Place</h2>
<div class="place__container container grid">
<!--==================== PLACES CARD 1 ====================-->
<div class="place__card">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place1.jpg" alt="" class="place__img">
<div class="place__content">
<span class="place__rating">
<i class="ri-star-line place__rating-icon"></i>
<span class="place__rating-number">4,8</span>
</span>

<div class="place__data">
<h3 class="place__title">Bali</h3>
<span class="place__subtitle">Indonesia</span>
<span class="place__price">$2499</span>
</div>
</div>

<button class="button button--flex place__button">


<i class="ri-arrow-right-line"></i>
</button>
</div>

<!--==================== PLACES CARD 2 ====================-->


<div class="place__card">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place2.jpg" alt="" class="place__img">

<div class="place__content">
<span class="place__rating">
<i class="ri-star-line place__rating-icon"></i>
<span class="place__rating-number">5,0</span>
</span>
<div class="place__data">
<h3 class="place__title">Bora Bora</h3>
<span class="place__subtitle">Polinesia</span>
<span class="place__price">$1599</span>
</div>
</div>

<button class="button button--flex place__button">


<i class="ri-arrow-right-line"></i>
</button>
</div>
861 – 903

<!--==================== PLACES CARD 3 ====================-->


<div class="place__card">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place3.jpg" alt="" class="place__img">

<div class="place__content">
<span class="place__rating">
<i class="ri-star-line place__rating-icon"></i>
<span class="place__rating-number">4,9</span>
</span>

<div class="place__data">
<h3 class="place__title">Hawaii</h3>
<span class="place__subtitle">EE.UU</span>
<span class="place__price">$3499</span>
</div>
</div>

<button class="button button--flex place__button">


<i class="ri-arrow-right-line"></i>
</button>
</div>

<!--==================== PLACES CARD 4 ====================-->


<div class="place__card">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place4.jpg" alt="" class="place__img">

<div class="place__content">
<span class="place__rating">
<i class="ri-star-line place__rating-icon"></i>
<span class="place__rating-number">4,8</span>
</span>

<div class="place__data">
<h3 class="place__title">Whitehaven</h3>
<span class="place__subtitle">Australia</span>
<span class="place__price">$2499</span>
</div>
</div>

<button class="button button--flex place__button">


<i class="ri-arrow-right-line"></i>
</button>
</div>
904 – 931

<!--==================== PLACES CARD 5 ====================-->


<div class="place__card">
<img src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A.
OFFICIAL FILE\ANIKEITBAGARIALAB1website\place5.jpg" alt="" class="place__img">

<div class="place__content">
<span class="place__rating">
<i class="ri-star-line place__rating-icon"></i>
<span class="place__rating-number">4,8</span>
</span>

<div class="place__data">
<h3 class="place__title">Hvar</h3>
<span class="place__subtitle">Croacia</span>
<span class="place__price">$1999</span>
</div>
</div>

<button class="button button--flex place__button">


<i class="ri-arrow-right-line"></i>
</button>
</div>
</div>
</section>

<p><input type="button" value="Submit Order" id="finishOrder" /> </p>

<br> <br>
932 – 954

<!--==================== SPONSORS ====================-->


<section class="sponsor section">

<div class="sponsor__container container grid">

<div class="sponsor__content">
<img src="ANIKEITBAGARIALAB1website/sponsors1.png" alt=""
class="sponsor__img">
</div>

<div class="sponsor__content">
<img src="ANIKEITBAGARIALAB1website/sponsors2.png" alt=""
class="sponsor__img">
</div>

<div class="sponsor__content">
<img src="ANIKEITBAGARIALAB1website/sponsors3.png" alt=""
class="sponsor__img">
</div>

<div class="sponsor__content">
<img src="ANIKEITBAGARIALAB1website/sponsors4.png" alt=""
class="sponsor__img">
</div>

<div class="sponsor__content">
<img src="ANIKEITBAGARIALAB1website/sponsors5.png" alt=""
class="sponsor__img">
</div>
</div>
</section>

</main>

<br> <br>
955 – 995

<!--==================== FOOTER ====================-->


<section class = "footer" id = "footer">
<footer class="footer section">
<div class="footer__container container grid">
<div class="footer__content grid">
<div class="footer__data">
<h3 class="footer__title">Travel</h3>
<p class="footer__description">Travel you choose the <br>
destination,
we offer you the <br> experience.
</p>
<div>
<a href="https://www.facebook.com/" target="_blank"
class="footer__social">
<i class="ri-facebook-box-fill"></i>
</a>
<a href="https://twitter.com/" target="_blank"
class="footer__social">
<i class="ri-twitter-fill"></i>
</a>
<a href="https://www.instagram.com/" target="_blank"
class="footer__social">
<i class="ri-instagram-fill"></i>
</a>
<a href="https://www.youtube.com/" target="_blank"
class="footer__social">
<i class="ri-youtube-fill"></i>
</a>
</div>
</div>

<div class="footer__data">
<h3 class="footer__subtitle">About</h3>
<ul>
<li class="footer__item">
<a href="" class="footer__link">About Us</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">Features</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">New & Blog</a>
</li>
</ul>
</div>
996 – 1037

<div class="footer__data">
<h3 class="footer__subtitle">Company</h3>
<ul>
<li class="footer__item">
<a href="" class="footer__link">Team</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">Plan and
Pricing</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">Become a
member</a>
</li>
</ul>
</div>

<div class="footer__data">
<h3 class="footer__subtitle">Support</h3>
<ul>
<li class="footer__item">
<a href="" class="footer__link">FAQs</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">Support Center</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">Contact Us</a>
</li>
</ul>
</div>
</div>

<div class="footer__rights">
<p class="footer__copy">A Responsive Travel Website</p>
<div class="footer__terms">
<a href="#" class="footer__terms-link">Terms &
Agreements</a>
<a href="#" class="footer__terms-link">Privacy Policy</a>
</div>
</div>
</div>
</footer>
</section>
1038 – 1050

<!--========== SCROLL UP ==========-->


<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-line scrollup__icon"> Scroll Up </i>
</a>

<!--=============== MAIN JS ===============-->


<script src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL
FILE\ANIKEITBAGARIALAB1website\main.js"></script>

<script src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL


FILE\ANIKEITBAGARIALAB1website\videoplay.js"></script>

<script src="C:\Users\rajes\OneDrive\Desktop\Code\HTML Code\1A. OFFICIAL


FILE\ANIKEITBAGARIALAB1website\scrollreveal.min.js"></script>

</body>
</html>
CODE – videoplay.js
/*==================== VIDEO ====================*/
const videoFile = document.getElementById('video-file'),
videoButton = document.getElementById('video-button'),
videoIcon = document.getElementById('video-icon')

function playPause(){
if (videoFile.paused){
// Play video
videoFile.play()
// We change the icon
videoIcon.classList.add('ri-pause-line')
videoIcon.classList.remove('ri-play-line')
}

else {
// Pause video
videoFile.pause();
// We change the icon
videoIcon.classList.remove('ri-pause-line')
videoIcon.classList.add('ri-play-line')

}
}
videoButton.addEventListener('click', playPause)

function finalVideo(){
// Video ends, icon change
videoIcon.classList.remove('ri-pause-line')
videoIcon.classList.add('ri-play-line')
}
// ended, when the video ends
videoFile.addEventListener('ended', finalVideo)
Output

Videoplay.js
Accordion
Links
Dropwdown and hover text
Main – 932 - 953

Sponsers

Main – 1027 -1036


CV using HTML

You might also like