A

PROJECT
ON

“Ek Bharat Shrestha Bharat Club

Website”

Submitted to

Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR
(AUTONOMOUS)
In the Partial Fulfillment of

B.Com. (Computer Application) Final Year

Submitted by
Shailendra Singh
Gaurav Kshirsagar

Under the Guidance of

Pravin J. Yadao

Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR
(AUTONOMOUS)
2022-2023

1
 Shiksha Mandal’s

G. S. COLLEGE OF COMMERCE & ECONOMICS,

NAGPUR
(AUTONOMOUS)

(2022 - 2023)

This is to certify that Mr. /Miss Shailendra Y Singh and Gaurav Kshirsagar

have completed their project on the topic of Ek Bharat Shrestha Bharat Club

Website prescribed by G. S. College of Commerce & Economics, Nagpur

(Autonomous) for B.Com. (Computer Application) – Semester-VI.

Date: Pravin J. Yadao

Place: Nagpur Project Guide

External Examiner Internal Examiner

2
 ACKNOWLEDGEMENT
We take this opportunity to express our deep gratitude and wholehearted thanks to project

guide Prof. Pravin Yadao, Coordinator for his guidance throughout this work. We are

very much thankful to him for his constant encouragement, support, and kindness.

We are also grateful to our teachers Prof. Rahul Tiwari, Prof. Sushma Gawande, Prof.

Preeti Rangari, Prof. Prajkta Deshpande, and Prof. Haresh Naringe for their

encouragement, help, and support from time to time.

We also wish to express our sincere thanks to Principal Dr. S. S. Kathaley for providing

us with a wide range of opportunities, facilities, and inspiration to gather professional

knowledge and material without which this project could not have been completed.

Shailendra Singh

Gaurav Kshirsagar

Date:

Place: Nagpur

3
 DECLARATION
We Shailendra Singh & Gaurav Kshirsagar hereby honestly declare that the work

entitled “Ek Bharat Shrestha Bharat Club Website” submitted by us at G. S. College

of Commerce & Economics, Nagpur (Autonomous) in partial fulfillment of the

requirement for the award of B.Com. (Computer Application) degree by Rashtrasant

Tukadoji Maharaj, Nagpur University, Nagpur has not been submitted elsewhere for the

award of any degree, during the academic session 2022-2023.

The project has been developed and completed by us independently under the supervision

of the subject teacher and project guide.

Shailendra Singh

Gaurav Kshirsagar

Date:

Place: Nagpur

4
 INDEX
Sr Particulars Page No. Remark
no.
1. Introduction 6-12
2. Objectives 13-15
3. Preliminary System Analysis 16-25
3.1 Preliminary Investigation
3.2 Present System in Use
3.3 Flaws in Present System
3.4 Need for a New System
3.5 Feasibility study
3.6 Project category

4. Software and Hardware Specifications 26-27

5. Detailed System Analysis 28-32
5.1 Structure of Website
5.2 Data Flow Diagram
6. System Design 33-247
6.1 Form Design
6.2 Source Code
6.3 Input Screen and Output Screen
7. Testing and Validation Check 248-250
8. System Security Measures 251-252
9. Implementation, Evaluation, Maintenance 253-254
10. Future Scope of the Project 255-256
11. Conclusion 257-258
12. Bibliography and Reference 259-60

5
INTRODUCTION

6
 As we all know India is a country of unity in diversity. The mountain
ranges, river-irrigated areas, rivers, streams, forest, and desert all have
beautified India with their outstanding diversity amongst people of various
races, castes, creeds, religions, and languages each state and region has its
uniqueness International local travellors visitors love this variety Colours,
culture, and the climate, etc. Dance & Music Colourful festivals and
beautiful handiworks spell on the national and international visitors. The
beaches of Goa, the backwaters of Kerala, and snow-clad mountains of
Himachal, the sands and, & lakes of Rajasthan, the world culture sights of
Delhi, etc are the symbol of the diversity of our nation. This colorful of a
country makes our country a major attraction of tourists that is beneficial for
the Economy, and prosperity of the country.

However, many of the differences in religions, traditions, languages,

and cultures have become so intense that they have assumed dangerous
proportions for National Unity and safety. We have to provide the best
facilities and safety to foreign tourists and maintain peaceful and amicable
coextensive people of different ethnicities and cultures. Without peace, our
diversity is of no use. It is the common duty of the government and the
people of India to keep the beautiful diversity of our nation secured in the
card of unity intact.

Meaning of Unity in Diversity:

The term unity in diversity relates to the state of togetherness or integrity

despite the presence of infinite diversity. Unity in diversity is based on the
concept that the individual has variations in physical qualities, skin color,

7
caste, creed, cultural and religious traditions, etc. are not seen as a dispute.
Rather, these differences are viewed as varieties that improve society and the
nation as a whole In India, the national unions only can be the establishment
of a strong, unified, and prosperous Indian, usually in the days of extremism
and terrorism. Mahatma Gandhi sacrificed his life for communal unity.

Though there are different communities like Bengalis, Gujaratis, Punjabis,

Maharashtrians, Tamilians, etc. the facts remain that despite divisions and
differences, caste or creed, we have lived together for thousands of years.
Though, there are differences between the Hindu and the Muslim
communities concerning their cultures, ideology, and rituals. They live
together and have a deep-rooted respect for each other. The Hindus send
greetings to their Muslim friends at the time of their Muslim festivals such
as Eid, Muharram, etc. Likewise, Muslims also send wishes or greetings to
their Hindu friends at the time of Hindu festivals such as Diwali, Durga puja,
etc. This describes the majority of unity among India’s Hindus and Muslims.

On many topics, they influence one another and are motivated by the ideals
of Oriental civilization. India is a large country. Different regions observe
climate changes. The spoken language of one state is quite foreign to other
states. They wear different types of clothes, celebrate different festivals, and
play varied religious rituals. People belonging to different cultures belong to
different religious beliefs.

8
Origin of Unity in Diversity:-

The term unity of diversity signifies the unity between people with different
cultural, and religious faiths, social statuses, and other demographic
variations. Since ancient times, this expression has had its organizations, and
various political and social assemblies use it to show unity among
individuals or societies. This is an ancient expression that was earlier used
by some societies in North America and China, around 500 BC. Unity in
India is the best model of unity in diversity because people living with
various religions and cultures follow the same laws as laid down by the
Constitution of India.

INTRODUCTION TO EBSB:-

Ek Bharat Shreshtha Bharat program aims to enhance interaction & promote

mutual understanding between people of different states/UTs through the
concept of state/UT pairing. The states carry out activities to promote a
sustained and structured cultural connection in the areas of language
learning, culture, traditions & music, tourism & cuisine, sports, and sharing
of best practices, etc.

BACKGROUND AND NEED:

India is a unique nation, whose fabric has been woven by diverse linguistic,
cultural, and religious threads, held together into a composite national
identity by a rich history of cultural evolution, coupled with a freedom
struggle that was built around the tenets of non-violence and justice. The

9
spirit of mutual understanding amidst a shared history has enabled a special
unity in diversity, which stands out as a tall flame of nationhood that needs
to be nourished and cherished into the future.

Time and technology have narrowed down distances in terms of connection

and communication. In an era that facilitates mobility and outreach, it is
important to establish cultural exchanges between people of different
regions, as a means to further human bonding and a common approach to
nation-building. Mutual understanding and trust are the foundations of
India's strength and all citizens should feel culturally integrated into all
corners of India. Students from the northeast, for example, should not feel
like 'strangers in a strange land' when they arrive in Delhi, and a person from
Uttarakhand should not feel like an outsider in Kerala.

CONCEPT OF EBSB:

The idea of a sustained and structured cultural connection between people of

different regions was mooted by Prime Minister Shri Narendra Modi during
the Rashtriya Ekta Divas held on 31st October 2015, to commemorate the
birth anniversary of Sardar Vallabhbhai Patel. Hon’ble Prime Minister
propounded that cultural diversity is a joy that ought to be celebrated
through mutual interaction & reciprocity between people of different States
and UTs so that a common spirit of understanding resonates throughout the
country. Every State and UT in the country would be paired with another
State/UT for some time, during which they would carry out a structured
engagement with one another in the spheres of language, literature, cuisine,
festivals, cultural events, tourism, etc. For example, Andhra Pradesh is

10
paired with Punjab During this period, Punjabis would attempt to learn
keywords in Telugu, a few Telugu books would be translated into Punjabi &
vice-versa, Andhraites would hold food festivals offering Punjabi dishes,
Punjabis would perform Andhra folk dances, while Andhraites would
perform Bhangra at staged events, etc. This pattern of cultural adoption of
the partner State/UT would be followed by all states and UTs.

HOW EBSB HAS BEEN TAKEN AHEAD? :-

States/UTs in India have been paired with each other for a fixed period. The
paired States/UTs signed MoUs with each other, delineating a set of
activities that they would carry out. An activity calendar for each pair was
prepared through mutual consultation, paving the way for a systematic
process of mutual engagement. Such interaction between different segments
of the population of each pair of States /UTs at the cultural level generated
the vibrance of understanding & appreciation amongst the people and forged
mutual bonding, thus securing an enriched value system of unity in the
nation. The pairing of States/ UTs is available on the website.

Introduction to the EBSB Club of College:

As we all know under the EBSB program initiated by our Prime Minister
our Maharashtra state partnered with Odisha state. So basically we will go to
share our culture with Odisha students and people there and will adapt and
learn new things and will try to know everything possible information about
Odisha state for example There Culture, Heritage, Food Culture, Eminent
people, and the most important thing is to try to learn their Odia language
which is most helpful to learn other things.

11
EBSB club provides a place for students interested in learning new things
about other states and having a passion for unity in diversity. This website
will help students who try to know more about the state currently we are
partnered with. For example, currently, we are partnered with Odisha State
so the information related to the Odisha state is available on the site which
we developed under this project.

12
Objectives

13
1)To Develop the website at the local level:
We aim to make a website for Ek Bharat Shreshtha Bharat Club of College
which provides information about the State with which we are partnered. We
aim to impart and provide basic knowledge about the culture of Odisha and
detailed information about the state because We are partnered with that state
under the EBSB program initiated by the central government to increase the
importance of unity in diversity.
2)To give Unity in diversity:
There is a diverse culture in India, this website will make understand
students know the culture of Odisha in detail which leads to the upgradation
of their knowledge.
3)To know about Odisha by using every aspect:
This Website helps the user and students of the college to know every aspect
of Odisha such as their culture, tradition, Food, Architecture, music, dance
form, etc. This website helps the user to know it very well.
4)To provide a Platform to Students:
This EBSB Club conducts various programs in which the students can take
part into it. They can participate in and learn languages and many more
things.

5)To Facilitate Registration Facility in one place: To provide the

registration facility to students and reduce the overload of sending the
Google form every year in the various groups again and again. With the help
of this website, we aim to provide this facility easily so that students can
register and no need to wait for the Google form every year Google form.

14
6)Make Awareness about the EBSB Program: This website gives
information about the EBSB Club and the programs which were done in the
college which helps the students to know more about Odisha and its culture.

15
Preliminary System
Analysis

16
1)Preliminary Investigation:

Preliminary Investigation refers to the collection of information that guides

the management of an organization to evaluate the merits and demerits of
the project request and make an informed judgment about the feasibility of
the proposed system. This sort of investigation provides us with a thorough
picture of the kind of software and hardware requirements that are most
feasible for the system, plus the environment in which the entire project has
to be installed and made operational.

The preliminary investigation sets the stage for gathering information about
the current problems and existing information systems. This information is
then used in studying the feasibility of possible information systems
solutions.

Gathering Information

Collecting or Gathering information or gathering information is one of the

most important stages of developing any system. To develop our Website we
collect the information by using various sources.

a) Department of EBSB: It’s the department under which all activities

of Ek Bharat Shrestha Bharat activities are conducted all the activities are
managed by the department

As our website is totally on that club that why we discuss the requirements
needed by the department with the department head.

b) Referring Books & Magazines: After the discussion about EBSB

Club. We came to know that we are partnered with Odisha State means we

17
have to share our culture with them and they have to share their culture with
us.

Our basic aim to develop this website is to provide information about Odisha
State to students in one place to collect information about the state we refer
to various books and magazines.

c) Visiting the related websites: To gather information in detail about

the state based on various aspects. We visited various websites and
authenticate all the information and select quality information to develop the
website.

We have visited various Blogs, Another Informative website, Official

Website of the Government to fulfilled our need for the required data.

d) Discussion:- We have to discuss with the concerned teachers about its

procedure and discuss various ways through which we can develop our
website efficiently.

e) Knowing various programming languages: Whenever you start

to plan different websites you must know which programming language you
know very well or in which you can develop your project efficiently

There are various programming languages available to develop the website.

Such as JAVASCRIPT, HTML, CSS, etc.

There are mainly two types of Websites i.e., static and dynamic.

A static website which not have the facility to change the data after
completion of the site which means hosting the site. It does not have any
connectivity with the database.

18
Dynamic Website is the opposite it has backend support of database. After
knowing about the basic information of each language we choose HTML,
CSS, and JavaScript to develop our website and for connectivity with the
database.

e) Knowing Basic System Requirements to Develop the

Website:

After knowing about the languages through which we can develop the
website.

We investigate the basic system requirement which is required to develop

the website.

2)Present system in use:

This present system is used to provide information related to the websites.

This system has to be maintained as per the user’s need and he can do
changes or updates from time to time as per his requirement. The current
system is outdated so the user wants only the updated version. Our website
provides brief information about Odisha, its culture, etc.

In Today’s Scenario, there is no such type of EBSB website that gives detailed
information by considering all the aspects of any state.

There is only one website that provides information about the BSB program
initiatively the Central Government, and a list of states partnered with each
other provides information about what is EBSB Program.

19
3)Flaws in the present system:

Presently only one website is available which gives information about the
“Ek Bharat Shreshtha Bharat Programme” and does not provide detailed
information about every state in detail. It just provides information about the
program and the names of the states partnered with each other.

4)Need for a New System:

This website is developed in such a way that it can help to overcome all the
flaws which are in the current system. As we mention that the flaws in the
Present System because of that we have to develop the College EBSB Club
Website so that students can the information about Odisha state in detail in one
place and it facilitates students who have completed the registration process in
College EBSB Club Website.

To impart the culture of Odisha to students we must need a website that

provides all information to the student in one place at the local level

5)Feasibility Study
Introduction:- A feasibility study is the first item on a project manager's
agenda before approving the start of a project. Although they are not needed
to carry out a feasibility study themselves, project managers utilize it as a
roadmap to steer the project and gain a complete grasp of its characteristics,
business objectives, and risk considerations.

Failure can indeed be terrifying. Nevertheless, beginning a challenging, big

project that will have an impact on your business may be exciting.

20
What is Feasibility Study?

A feasibility study is a thorough analysis of a project proposal that

considers all elements essential to success to determine the project's chances
of success. ROI, or the projected earnings from the project, can be utilized to
quantify business success in general.

A proposed strategy or project's viability is assessed within a

feasibility study. Also, a project's or business venture's viability is assessed
as part of a feasibility study to ascertain its likelihood of success.

A feasibility analysis, as its name suggests, is used to assess an idea's

viability, such as confirming that a project is both legally and technically
possible and also economically reasonable. It tells if, in particular
conditions, it may or may not be possible to complete a project. There are
several potential causes for this, including the need for excessive resources,
which not only hinders them from executing other jobs but can also cause
more expense than a business would recover by taking on an unsuccessful
project.

A well−planned and effective study can provide a historical

background of the company or project, including descriptions of goods or
services, accounting statements, information about implementations and
management, financial data, marketing policies, research, legal needs, and
tax duties. Such analyses often come before technical creation and project
execution.

Types of Feasibility Studies: Since a feasibility analysis assesses the

project's likelihood of success, perceived impartiality is a crucial element in
the legitimacy of the assessment for interested investors and financing
21
institutions. A feasibility study can have five different areas, each of which
analyses a different topic. These are as follows –

1. Technical Feasibility:
The technological resources that the organization has access to are the main
focus of this examination. It aids companies in determining if the
technological resources are enough and if the tech team has the skills
necessary to turn concepts into functional systems. The assessment of the
proposed system's technical needs, including its software and other
components, is part of the technical feasibility process.

2. Financial Feasibility:

Before allocating financial resources, this evaluation often includes a cost or

benefit assessment of a project to help businesses examine the feasibility,
costs, and advantages related to a project. Additionally, it improves the
credibility of a project and serves as an impartial project evaluation,
assisting decision−makers in identifying the favorable economic advantages
that the project proposal would bring to the business.

3. Legal Feasibility:

This analysis looks at any potential conflicts between the planned project
and applicable laws, such as zoning regulations, data protection laws, and
social media usage regulations. Let's imagine that a company wishes to
build a brand new office space in a particular area. A feasibility study can
find that the preferred site of the organization is not permitted for that
particular kind of enterprise. Realizing that their endeavor was unworkable
from the start, that company has just saved much time and effort.
22
4. Operational Feasibility: This evaluation entails researching to
determine whether and how effectively the needs of the organization can be
satisfied by the project's completion. Additionally, an operational feasibility
study evaluates how the planning of a project fulfills the needs found during
the system development process' requirements analysis phase.
5. Scheduling Feasibility:

The most crucial evaluation for a project's success is its scheduling

feasibility. After taking into account the organization's capabilities, it
predicts the amount of time required to execute the project and assesses if
that timeframe is accessible.

Setting deadlines and estimating the amount of time it will take to complete
the project is crucial for its success. Next, this study helps analyze how the
project's schedule fits with present business practices, including demand
forecasting and production plan, among numerous other factors.

We did the PI by using different aspects according to our project which is

explained below in detail

Knowing various programming languages: Whenever you start to plan

different websites you must know which programming language you know
very well or in which you can develop your project efficiently

There are various programming languages available to develop the website.

Such as JAVASCRIPT, HTML, CSS, etc.

There are mainly two types of Websites i.e., static and dynamic.

23
A static website which not have the facility to change the data after
completion of the site which means hosting the site. It does not have any
connectivity with the database. Dynamic Website is the opposite it has
backend support of database. After knowing about the basic information of
each language we choose HTML, CSS, and Java JavaScript op our website
and for connectivity with the database.

6)Project Category:

Website of the Department of EBSB Club which is a dynamic website

developed using HTML, CSS, PHP, JavaScript, and MySQL.

HTML:

HTML is an acronym for Hyper Text Markup Language used for creating
web pages and web applications. Let's see what Hypertext Markup
Language means, and Web pages.

Hyper Text:

Hypertext simply means "Text within Text." A text that has a link within it,
is a hypertext. Whenever you click on a link that brings you to a new
webpage, you have clicked on a hypertext. Hypertext is a way to link two or
more web pages (HTML documents) with each other.

Markup language:

A markup language is a computer language that is used to apply layout and

formatting conventions to a text document. Markup language makes the text
more interactive and dynamic. It can turn text into images, tables, links, etc.

24
Cascading Style Sheets (CSS):

It is a style sheet language that is used to describe the look and formatting
of a document written in a markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML
document including plain XML, SVG, and XUL.

CSS is used along with HTML and JavaScript in most websites to create
user interfaces for web applications and user interfaces for many mobile
applications.

JAVASCRIPT:

JavaScript is a very powerful client-side scripting language. JavaScript is

used mainly for enhancing the interaction of a user with the webpage. In
other words, you can make your webpage more lively and interactive, with
the help of JavaScript. JavaScript is also being used widely in game
development and Mobile application development.

25
Software and Hardware
Requirement Specification

26
Following are the Software and Hardware specifications that are required to
develop this project are as follows:

Software specification:-

a) Language Used (Front End) – HTML, CSS, PHP, JavaScript.

b) Back End – MySql

c) Web Browser – Brave, Google Chrome, etc.

d) Text Editor used – Visual Studio Code.

Hardware specification:-

a) Processor: AMD Ryzen 5

b) Ram: 4Gb

c) HDD: 1TB

d) SSD: 256Gb

27
Detailed System Analysis

28
29
30
System Design

31
Form Design:-
Registration Form

32
Index.php:-

33
34
35
lang.php:-

36
histmain.php:-

37
eminent.php:-

38
nilamani.php

39
cusine.php:-

40
 beaches.php:-

beachesinfo.php:-

41
wild.php:-

42
balasore.php:-

43
temple.php:-

44
fest.php:-

45
46
Sorce Code:-
Index.php:-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script defer
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
integrity="sha384-
rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHo
nlDtnE7fpc"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

</head>

<body>
<!--navigation-->

<nav>
<img src="logo.png" alt="">
<img src="gscen_logo11.png" alt="">
<div class="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="discover.php">About Odisha</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="contactus.php">Contact us</a></li>
<li><a href="registration.php">Register</a></li>
<li><a href="display.php">Student List</a></li>

47
 </ul>
</div>
</nav>
<!-- home -->
<section id="home">
<h2>Ek Bharat Shreshtha Bharat</h2>
<p>Ek Bharat Shreshtha Bharat programme aims to enhance
interaction & promote mutual understanding between
people of different states/UTs through the concept of state/UT
pairing. The states carry out activities to
promote a sustained and structured
cultural connect in the areas of language learning, culture,
traditions & music, tourism & cuisine, sports
and sharing of best practices, etc.</p>
<div class="btn">
<a class="blue" href="discover.php">Know More About
Odisha</a>
<a class="yellow" href="https://ekbharat.gov.in">Visit the site of
EBSB</a>
</div>

</section>
<!--Feature-->
<section id="gallery">
<h1>Photos</h1>
<div class="container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="p1.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p2.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p3.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p4.jpg"
width="950px" height="800px" alt=""></div>

48
 <div class="swiper-slide"><img src="p5.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p6.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p7.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p8.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p9.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="p10.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="a1.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="a2.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="a3.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="a4.jpg"
width="950px" height="800px" alt=""></div>
<div class="swiper-slide"><img src="a5.jpg"
width="950px" height="800px" alt=""></div>

</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>
</div>
</section>

<section id="Member">
<h1>Our Member</h1>
<p>Ek Bharat Shrestha Bharat programme, aims to actively
enhance interaction between people of diverse cultures

49
 living in different States and UTs in India, with the objective of
promoting greater mutual understanding
amongst them.</p>
<Div class="member-box">
<div class="members">

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

<div class="details">
<span>Dr. S. S. Kathaley</span>
<Strong>
<p>Offg.Principal</p>
</Strong>

</div>
</div>

<div class="members">

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

<div class="details">
<span>Dr. P. M. Paradkar</span>
<Strong>
<p>Nodal Officer EBSB</p>
</Strong>

</div>
</div>

<div class="members">

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

<div class="details">
<span>Dr. D. V. Chavan</span>
<Strong>
50
 <p>Convener</p>
</Strong>

</div>
</div>
<div class="members">

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

<div class="details">
<span> Prof. A. S Jain</span>
<Strong>
<p>Member</p>
</Strong>

</div>
</div>

</Div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Rference link</h4>
<ul>
<li><a href="aboutus.php">about us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">privacy policy</a></li>
<li><a href="#">affiliate program</a></li>
</ul>
</div>
<div class="footer-col">
<h4>About Odisha</h4>
<ul>
<li><a href="discover.php">Tourism</a></li>
<li><a href="discover.php">Heritage</a></li>
<li><a href="discover.php">Festivals</a></li>
<li><a href="discover.php">Odisha</a></li>
51
 <li><a href="#">&copy; Copyright 2023 All Rights
Reserved EBSB CLUB </a></li>

</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>

</div>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-
bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
disabledOnInteraction: false,

},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

52
</body>

</html>

Style.css:-

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-image: url(webbg/webbg.webp);
background-size: cover;
font-family: 'Times New Roman', Times, serif;
}

/* global Tags */

h1 {
font-size: 2.5rem;
font-weight: 700;
color: rgb(35, 35, 85);
text-align: center;
}

span {
font-size: .9rem;
color: #757373;
}

h6 {
font-size: 1.1rem;
color: rgb(24, 24, 49);
}
53
/* navigation */

nav {
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1vw 8vw;
align-items: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.20);
background-color: rgb(222, 237, 243);
z-index: 999;
}

nav img {
width: 215px;
cursor: pointer;
}

nav .navigation ul {
display: flex;
justify-content: flex-end;
align-items: center;
}

nav .navigation ul li {
list-style: none;
margin-left: 30px;
}

nav .navigation ul li a {
text-decoration: none;
color: rgb(21, 21, 100);
font-size: 16px;
font-weight: 500;
}

54
nav .navigation ul li a:hover {
color: #FDC93B;
transition: 0.5s ease;
}

/*home*/

#home {
background-image: linear-gradient(rgba(128, 123, 119, 0.3), rgba(5, 4,
46, 0.7)), url("bacg.jpeg");
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#home a {
text-decoration: none;
font-size: 0.9rem;
padding: 13px 35px;
background-color: #fff;
font-weight: 600;
border-radius: 5px;
}

#home h2 {
color: #fff;
font-size: 2.2rem;
letter-spacing: 1px;
}

#home .btn {
margin-top: 30px;
margin-bottom: 30px;
55
}

#home p {
color: #fff;
font-size: 0.9rem;
letter-spacing: 1px;
width: 50%;
color: #fff;
line-height: 25px;
}

#home a.blue {
color: #fff;
background-color: rgb(21, 21, 100);
transition: 0.5s ease;
}

#home a.blue:hover {
color: rgb(21, 21, 100);
background-color: #fff;
}

#home a.yellow {
color: #fff;
background-color: rgb(117, 230, 194);
transition: 0.5s ease;
}

#home a.yellow:hover {
color: rgb(21, 21, 100);
background-color: #fff;
}

#gallery .container {
width: 100%;
height: 100vh;
background: transparent;
display: flex;
/*align-items: center;*/
/* justify-content: center;*/
56
}

.swiper {
width: 80%;
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
color: #fff;
}

.swiper .swiper-pagination-bullet-active {
background: #fff;
}

#Member {
padding: 8vw 8vw 0 8vw;
text-align: center;
}

#Member .member-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
margin-top: 50px;
}

#Member .members {
text-align: start;
background: transparent;
height: 100%;
}

#Member .members img {

width: 50%;
height: 50%;
background-size: cover;
background-position: center;
}

57
#Member .members .details {
padding: 15px 15px 0 15px;
}

.container {
max-width: 1170px;
margin: auto;
}

.details span {
color: black;
}

.row {
display: flex;
flex-wrap: wrap;
}

ul {
list-style: none;
}

.footer {
background-color: rgb(13, 85, 105);
padding: 70px 0;
}

.footer-col {
width: 25%;
padding: 0 15px;
}

.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
58
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}

.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}

.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}

.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}

.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
59
 border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}

.footer-col .social-links a:hover {

color: transparent;
background-color: #ffffff;
}

/*responsive*/

@media(max-width: 767px) {
.footer-col {
width: 50%;
margin-bottom: 30px;
}
}

@media(max-width: 574px) {
.footer-col {
width: 100%;
}
}

Style2.css

*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}

body {
font-family: 'Times New Roman', Times, serif;
background-image: url(god.jpg);
/*padding: 0% 1px;*/
60
 background-size: cover;
}

.container {
border: 2px solid black;
max-width: 400px;
width: 100%;
background-color: transparent;
margin: 10px auto;
padding: 10px;
box-shadow: 5px 5px 5px rgba(108, 87, 87, 0.9);
background-size: cover;
}

.container .title {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
text-align: center;
}

.container .form {
width: 100%;
}

.container .form .input_field {

margin-bottom: 15px;
display: flex;
align-items: center;
}

.container .form .input_field label {

width: 200px;
margin-right: 5px;
font-size: 20px;
background-color: transparent;
border-radius: 5px;
}

61
.container .form .input_field .input,
.container .form .input_field .textarea {
/*border: 2px solid black;*/
width: 100%;
height: 35px;
outline: none;
border: 4px solid aqua;
font-size: 15px;
padding: 8px 10px;
border-radius: 5px;
transition: all 0.5 ease;
background-color: transparent;
}

.container .form .input_field .textarea {

resize: none;
height: 80px;
}

.container .form .input_field .custom_selectbox {

position: relative;
width: 105%;
height: 35px;
padding-bottom: 10px;
}

.container .form .input_field .custom_selectbox select {

-webkit-appearance: none;
appearance: none;
/*position: relative;*/
width: 100%;
height: 40px;
margin-right: 7px;
padding: 8px 8px;
border: 4px solid aqua;
/*text-align: center;*/
border-radius: 5px;
background-color: transparent;
}

62
.container .form .input_field .custom_selectbox:before {
content: "";
position: absolute;
top: 12px;
right: 10px;
border: 4px solid black;
border-color: violet transparent transparent transparent;
pointer-events: none;
}

.container .form .input_field .input:focus,

.container .form .input_field .textarea:focus {
border: 2px solid black;
}

.container .form .input_field .custom_selectbox select:focus {

border: 2px solid black;
}

.container .form .input_field p {

font-size: 14px;
color: #757575;
}

.container .form .input_field .check {

width: 20px;
height: 20px;
position: relative;
display: block;
cursor: pointer;
}

.container .form .input_field .check input[type="checkbox"] {

position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.container .form .input_field .check .checkmark {

63
 width: 20px;
height: 20px;
border: 1px solid violet;
display: block;
position: relative;
}

.container .form .input_field .check .checkmark::before {

content: "";
position: absolute;
top: 2px;
left: 3px;
width: 7px;
height: 4px;
border: 2px solid;
border-color: transparent transparent white white;
transform: rotate(-45deg);
}

.container .form .input_field .check

input[type="checkbox"]:checked~.checkmark {
background: violet;
}

.container .form .input_field .check

input[type="checkbox"]:checked~.checkmark::before {
display: block;
}

.container .form .input_field .btn {

width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 0;
background-color: rgb(56, 178, 187);
cursor: pointer;
border-radius: 3px;
outline: none;
}

64
.container .form .input_field:last-child {
margin-bottom: 0;
}

.container .form .input_field .btn:hover {

background-color: purple;
}

@media (max-width:400px) {
/*body{
background-color: blue;

}*/
.container .form .input_field {
flex-direction: column;
align-items: flex-start;
}
.container .form .input_field label {
margin: 5px;
}
.container .form .input_field.terms {
flex-direction: row;
}
}

discover.php:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Discover Odisha</title>
<link rel="stylesheet" href="disc.css">
</head>

65
<body>

<div class="nav">

<ul>
<img src="ED.jpg" alt=""></a>

<li><a href="fest.php">Festival</a></li>
<li><a href="">Tourism</a>
<ul>
<li><a href="beaches.php">Beaches</a></li><br>
<li><a href="wild.php">Wildlife</a></li><br>
<li><a href="balasore.php">Heritage</a></li><br>
<li><a href="temple.php">Temple</a></li><br>
</ul>
</li>
<li><a href="">Odisha</a>
<ul>

<li><a href="histmain.php">History</a></li>
<li><a href="eminent.php">Eminent People</a></li>
<li><a href="cuisines.php">Cusines</a></li>
</ul>
</li>
<li><a href="language.php">Language</a></li>
<li><a href="index.php">Home</a></li>
</ul>
</div>

<div class="wrap">
<Section id="Main">
<div class="heading">
<h1>ODISHA : THE LAND OF GOD</h1>
</div>
<div class="image">
<img src="aboutodisha/KonarkTemple.jpg" class="center"
alt="">
66
 </div>
<div class="caption">
<strong>
<p>Odisha (Odia: ଓଡ଼ିଶା), also known as Orissa, is a state of
India, located on the east coast
of India, by the Bay of Bengal. It is the modern name of
the ancient nation of Kalinga, which
was
invaded by the Maurya Emperor Ashoka in 261 BC. The
modern state of Odisha was established on 1
April 1936 at Kanika Palace, Cuttack, as a province in
India, and consists
predominantly of Odia speakers.Dhauli Giri,
Bhubaneswar 1 April is therefore celebrated as Utkal
Divas (Odisha Day). Odisha is the ninth largest state by
area in India, and the eleventh largest
by population. Odia is the official and most widely
spoken language with 93.33% Odia speakers
according to linguistic survey. Odisha has a relatively
unindented coastline (about 480 km long)
and lacks good ports, except for the deepwater facility at
Paradip.</p>
</strong>
</div>

<div class="caption">
<strong>
<p>1 April is therefore celebrated as Utkal Divas (Odisha
Day). Odisha is the ninth largest
state by area in India, and the eleventh largest by
population. Odia is the official and most
widely spoken language with 93.33% Odia speakers
according to linguistic survey. Odisha has a
relatively unindented coastline (about 480 km long) and
lacks good ports, except for the
deepwater
facility at Paradip.</p>
</strong>
</div>
67
 <div class="image">
<img src="aboutodisha/orissa-wildlife-tour.jpg" class="center"
alt="">
</div>
<div class="caption">
<strong>
<p>The narrow, level coastal strip, including the Mahanadi
River delta supports the bulk of
the population. The interior of the state is mountainous
and sparsely populated.
Deomali at 1672 m is the highest point of the state.
Odisha is subject to intense cyclones.
The most intense one, in October 1999, Tropical Cyclone
caused severe damage and some 10256
deaths. Odisha is home to the Hirakud Dam, near
Sambalpur the longest earthen dam in the world.
</p>
</strong>
</div>
<div class="caption">
<strong>
<p>Odisha has several popular tourist destinations. Puri,
Konark & Bhubaneswar are known as
Golden triangle of eastern India. Puri, with the Jagannath
temple near the sea
(famous for Rath Yatra or the Car Festival), and Konark,
with the Sun Temple, are
visited by thousands of tourists every year. The Jagannath
Temple of Puri, the Konark Sun
Temple, the Lingaraj Temple, Udayagiri and Khandagiri
Caves, Dhauligiri of Bhubaneshwar,
Ashoka's famous Rock Edict at Jaugada near Berhampur
city and the Barabati Fort of Cuttack are
important in the archaeological history of India.</p>
</strong>
</div>

<div class="heading">
<h1>Odisha in pre-historic age</h1>
68
 </div>

<div class="image">
<img src="aboutodisha/Jagannath_temple_small2.jpg"
class="center" alt="">
</div>
<div class="caption">
<strong>
<p>On the other hand in the third century BC, in the eastern
part of Odisha Kalinga flourished
as a powerful empire under the Jaina emperor, Kharavela.
He ruled all the way down south to
include parts of the Tamil country. He built the superb
monastic caves at Udayagiri and
Khandagiri Caves. Subsequently, the region was ruled
under various monarchs, such as
Samudragupta and Shashanka. It also was a part of
Harsha's empire. In 795 AD, the king
Yayati Kesari I of Kesari or Soma dynasty of Kosala
united Kosala and Utkala into a single
empire. He is also supposed to have built the first
Jagannath Temple at Puri, although the
current structure of the temple is entirely different and
was built by Kings Choda Gangadeva
and Ananga Bhimadeva of the Eastern Ganga Dynasty in
the 12th century. The famous Lingaraja
temple in Bhubaneshwar was started by Keshari dynasty
king Yayati Keshari III and completed by
his son Lalatendu Keshari in the 10th century.
</p>
</strong>
</div>
<div class="caption">
<strong>
<p>King Narasimha Dev is reputed to have built the
magnificent Konark Sun Temple.
Although now largely in ruins, the temple may have once
rivaled the Taj Mahal in splendour.
The Mughals conquered Coastal Odisha in 1576. The last
Hindu Emperor of Odisha, Gajapati
69
 Mukunda Deva, was defeated and was killed in the battle
of Gohiratikiri. The coastal plain
of Odisha from Medinipur to Rajahmundry came under
Mughal rule, which was broadly divided
into six parts as Jaleswar Sarkar, Bhadrak Sarkar, Cuttack
Sarkar, Chicacole (Srikakulam)
Sarkar,
Kalinga Dandapat and Rajamundry Sarkar or Godavari
Province.</p>
</strong>
</div>

<div class="image">
<img src="aboutodisha/1similipal-tiger-orissa1.jpg"
class="center" alt="">
</div>
<div class="caption">
<strong>
<p>Odisha's Central, Northern, Western and Southern hilly
areas were ruled independently by Hindu
kings.
The Nizam of Hyderabad occupied the area between
Rajahmundry to Srikakulam in 16th century.
Medinipur was attached to Bengal
province in 18th century. The remaining parts of Coastal
Odisha, were subsequently ceded to the
Maratha
Empire in 1751. The British occupied the Northern
Circars comprising the southern coast of
Odisha as a result of
the Carnatic Wars in the early 1760s and incorporated
them into the Madras Presidency
gradually.lion gate
In 1803, the British under the British East India Company
annexed the Maratha province of Odisha
after the
Second Anglo-Maratha War. The northern and western
districts of Odisha were incorporated into
Bengal
70
 Presidency. Following famine and floods in 1866, large
scale irrigation projects were undertaken
in
the last half of the 19th century. The coastal section was
separated from Bengal and made into
the Province of
Bihar and Odisha in 1912, in response to local agitation
for a separate state for the
Odia-speaking people. In 1936,
Bihar and Odisha were split into separate provinces. Thus
after a long period of struggle the
Odia people got re-united after centuries of political
separation. On 1 April 1936, the new
province of Odisha came into existence on linguistic basis
during the British rule in India with
Sir Jhon Austin Hubbak as the first Governor. A long
cherished dream of Odia people and their
leaders like Madhusudan Das,</p>
</strong>
</div>
<div class="caption">
<strong>
<p>Maharaja Krushna Chnadra Gajapati, Pandit Nilakantha
Das, Bhubanananda Das and many other
came true. The district of Ganjam was transferred from
Madras Presidency to the new province of
Odisha on 1 April 1936. From that time onwards people
of Odisha celebrate the day 1 April as
Utkal Divas or Odisha Day. Following Indian
independence, the area of Odisha was almost doubled
and the population was increased by a third by the
addition of 24 former princely states.
In 1950, Odisha became a constituent state in the Union
of India. Since prehistoric days the
land of Odisha has been inhabited by various people. The
earliest settlers of Odisha were
primitive hill tribes. Although prehistoric communities
cannot be identified, it is well known
that Odisha had been inhabited by tribes like Saora or
Sabar from the Mahabharata days. Saora
71
 in the hills and the Sahara and Sabar of the plains
continue to be an important tribe
distributed almost all over Odisha. Most of the tribal
people have been influenced by Hindus and
have adopted Hindu manners, customs and rituals. Bonda
Parajas of Koraput district are the best
example of these tribes. Several pre-historic sites have
been excavated in Odisha since the
arrival of Britishers. Kaliakata of Angul, Kuchai &
Kuliana of Mayurbhanj, Vikramkhol near
Jharsuguda, Gudahandi and Yogimath of Kalahandi,
Ushakothi of Sambalpur, Similikhol near
Bargarh etc.</p>
</strong>
</div>
<div class="image">
<img src="aboutodisha/ratnagiri2.jpeg" class="center" alt="">
</div>
<div class="caption">
<strong>
<p>Odisha has a history spanning a period of over 5,000
years. Before Kalinga it was named as
Udra or "Odra Desa". The Ancient Odra desa or Ordesa
was limited to the valley of Mahanadi and
to
the lower course of Subarnarekha River. It comprised the
whole of the present districts of
Cuttack
and Sambalpur and a portion of Midnapur. Bounded on
the west by Gondwana, on the north by the
wild
hill states of Jaspur and Singhbhum, on the east by the sea
and on the South by Ganjam, Odisha
has
a legendary history. The name Odia originated from Odra
or Udra tribes that inhabited the
central
coastal belt (Khordha District and Nayagarh District) of
modern Odisha. Odisha has also been the

72
 home of the Kalinga, Utkal, Mahakantara/Kantara and
Kosal that played a particularly prominent
role in the region's history, and one of the earliest
references to the ancient Kalingas appears
in the writings of Vedic chroniclers. In the 6th century
BC, Vedic Sutrakara Baudhayana mentions
Kalinga as being beyond the Vedic fold,indicating that
Brahminical influences had not yet
touched
the land. Unlike some other parts of India, tribal customs
and traditions played a significant
role in shaping political structures and cultural practices
right up to the 15th century, when
Brahminical influences triumphed over competing
traditions and caste differentiation began to
inhibit social mobility and erode what had survived of the
ancient republican tradition.</p>
</strong>
</div>

<div class="heading">
<h1>History of Odisha</h1>
</div>
<div class="caption">
<strong>
<p>A major turning point in world history took place in
Odisha. The Kalinga War that led emperor
Ashoka to embrace non-violence and the teachings of
Buddha was fought here in 261 BC. Ashoka's
military
campaign against Kalinga was one of the bloodiest in
Mauryan history on account of the fearless
and
heroic resistance offered by the Kalingas to the mighty
armies of the expanding Mauryan empire.
Perhaps on account of their unexpected bravery, emperor
Ashoka was compelled to issue two edicts
specifically calling for a just and benign administration in
Kalinga.</p>
</strong>
73
 </div>
<div class="image">
<img src="aboutodisha/jayjagannath_1.jpg" class="center"
alt="">
</div>
<div class="caption">
<strong>
<p>Later on, Ashoka was instrumental in spreading
Buddhist philosophy all over Asia. However,
Ativ Land (South Western Odisha) was unconquered by
Ashoka. Tel river civilization put light
towards a great civilization existing in Kalahandi,
Balangir, Koraput (KBK) region in the past
that is recently getting explored. The discovered
archaeological wealth of Tel Valley suggest a
well civilized, urbanized, cultured people inhabited on
this land mass around 2000 years ago and
Asurgarh was its capital.Kalahandi along with Koraput
and Bastar was part of Kantara referred in
Ramayana and Mahabharata. In 4th century B.C. this
region was known as Indravana from where
precious gem-stones and diamond were collected for the
imperial Maurya treasury. During the
period of Maurya emperor Ashoka, Kalahandi along with
Koraput and Bastar region was called Atavi
Land. This land was unconquered as per Ashokan record.
In the beginning of Chrisitan era
probably
it was known as Mahavana.In 4th Century A.D.
Vyaghraraja was ruling over Mahakantara comprising
Kalahandi, undivided Koraput and Bastar region.
Asurgarh was capital of Mahakantara. Hatigumpha
Inscription of Emperor Kharavela, Udaygiri Konark Sun
Temple built by the Eastern Ganga dynasty
is one of the most well renowned temples in India and is a
World Heritage Site.</p>
</strong>
</div>

</Section>
74
 </div>

</body>

</html>

disc.css:-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
font-family: 'Times New Roman', Times, serif;
}

body {
background-color: bisque;
border: #0cd2f3;
}

.nav {
width: 100%;
height: 60px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
position: fixed;
z-index: 999;
}

ul {
list-style-type: none;
}

ul li {
75
 float: right;
width: 140px;
height: 60px;
font-size: 20px;
line-height: 60px;
}

ul li a {
text-decoration: none;
color: black;
display: block;
}

ul li a:hover {
background-color: #0cd2f3;
transition: 1s all ease;
}

ul li ul li {
display: none;
background-color: antiquewhite;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
height: 50px;
transition: 1s all;
}

ul li:hover ul li {
display: block;
transition: 1s all;
animation: drop 1s ease;
}

@keyframes drop {
0% {
transform: scale(2, 2) rotatex(90deg);
}
100% {
transform: scale(1, 1) rotatex(0deg);
}
}
76
.heading h1 {
text-align: center;
}

.caption {
padding-top: 10px;
padding-bottom: 10px;
}

.caption p {
text-align: justify;
margin-left: 30px;
margin-right: 30px;
text-transform: capitalize;
font-family: 'Times New Roman', Times, serif;
line-height: 5ch;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
border-style: inset;
border-color: rgb(210, 208, 212);
border-width: 10px;
margin-top: 30px;
}

.nav ul img {
width: 8%;
}

.wrap {
border-style: double;
box-sizing: border-box;
border-width: 10px;
margin-left: 30px;
margin-right: 30px;
77
 margin-bottom: 30px;
background-color: aqua;
overflow: hidden;
padding-top: 100px;
}

language.php:-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="lang.css">
</head>

<body>
<div class="scrollmenu">
<a href="discover.php">Home</a>
<a href="#1">Odia (ଓଡ଼ିଆ)</a>
<a href="#2">Written Odia </a>
<a href="#3"> Odia alphabet</a>
<a href="#4">Consonants</a>
<a href="#5">Some conjunct consonants</a>
<a href="#6">Numerals</a>
</div>
<Section id="Main">
<div class="heading">
<h1>Oriya Language</h1>
</div>
<div class="sub-head" id="1">
<p>Odia (ଓଡ଼ିଆ)</h1>
</div>
<div class="caption">

78
 <strong>
<p>Odia is an Indo-Aryan language spoken by about 40
million people mainly in the Indian state of
Odisha, and also in parts of West Bengal, Jharkhand,
Chhattisgarh and Andhra Pradesh. Odia is one of
the many official languages of India. It is the official
language of Odisha, and the second official
language of Jharkhand. It is also designated as a Classical
Language in India as it has a long
literary history. Odia is closely related to Bengali and
Assamese.
Odia is also known as Oriya, and Odisha as Orissa, however
Odia and Odisha are now the preferred
names in
English as they are closer to their native names: ଓଡ଼ିଆ (oḍiā)
[ɔɖiaː] and ଓଡ଼ିଶା (oḍiśā) [ɔɖisaː].
</p>
</strong>
</div>

<div class="sub-head" id="2">

<p>Written Odia</h1>
</div>
<div class="caption">
<strong>
<p>The Odia script developed from the Kalinga script, one of
the many descendents of the Brahmi script
of ancient India. The earliest known inscription in the Odia
language, in the Kalinga script, dates
from 1051.
The curved appearance of the Odia script is a result of the
practice of writing on palm leaves,
which have a
tendency to tear if you use too many straight lines..</p>
</strong>
</div>

<div class="heading" id="3">

<h1>Odia alphabet</h1><br>

79
 <h1 class="sub">Vowels and vowel diacritics with k</h1>
</div>

<div class="image">
<img src="language/oriya_vwl.gif" class="center" alt="">
</div>

<div class="heading" id="4">

<h1>Consonants</h1>
</div>

<div class="image">
<img src="language/oriya_cons.gif" class="center" alt="">
</div>

<div class="heading" id="5">

<h1>Some conjunct consonants</h1>
</div>

<div class="image">
<img src="language/oriya_conj.gif" class="center" alt="">
</div>

<div class="heading" id="6">

<h1>Numerals</h1>
</div>

<div class="image">
<img src="language/oriya_num.gif" class="center" alt="">
</div>

</Section>

</body>

</html>

80
lang.css:-
@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Times New Roman', Times, serif;
}

.heading {
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
}

.heading h1 {
text-align: center;
border-style: solid;
font-family: cursive;
padding-bottom: 10px;
}

.image {
padding: 10px;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

81
.caption p {
text-align: justify;
text-decoration: solid;
margin-left: 20px;
margin-right: 20px;
font-size: 20px;
}

.sub-head p {
font-size: 30px;
font-style: italic;
padding-left: 10px;
}

.sub {
padding-top: 10px;
}

.scrollmenu {
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1vw 8vw;
align-items: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.20);
background-color: rgb(0, 0, 0);
z-index: 999;
}

.scrollmenu a {
color: aliceblue;
font-weight: 200;
text-decoration: none;
}

#Main {
border-style: outset;
border-color: rgb(127, 185, 210);
82
 box-shadow: inset;
border-width: 20px;
background-color: white;
}

.scrollmenu a:hover {
background-color: #140ec9;
border-radius: 5px;
}

Histmain.php:-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>histmain</title>
<link rel="stylesheet" href="histmain.css">
</head>

<body>
<div class="scrollmenu">
<a href="discover.php">About Odisha</a>
<a href="#section1">Early History of Odisha</a>
<a href="#section2">Medieval History </a>
<a href="#section3"> Gajapati Dynasty :</a>
<a href="#section4"> Mukunda Deva</a>
<a href="#section5"> Bengal (Karrani) rule ::</a>
<a href="#section6"> Mughal rule</a>
<a href="#section7">Under Akbar Rule</a>
<a href="#section8">Under Shah Jahan</a>
<a href="#section9">Under Aurangzeb </a>
<a href="#section10">Maratha rule </a>
83
 </div>
<Div class="Container">

<Div class="Heading">
<h1>INTRODUCTION TO HISTORY OF ODISHA</h1>
<p>The recorded enthralling history of Odisha goes back more
than two millennium. Several great empires and
dynasties have ruled over the state and have contributed
greatly to the history, culture and development
of Odisha. Odisha is formally known as orissa. In the different
era the region and parts of the region
were known by different names.

In the ancient times Odisha was known as Kalinga which was

named after son of king Bali. According to
some scriptures and mythology he founded the kingdom of
Kalinga, in the current day region of coastal
Odisha, including the Northern Circars. Kalinga is mentioned
in the Mahabharata several times. From the
time of Kalinga to Odisha the state is refered/ called by many
names like Utkala, Mahakantara, Urda
(Odia word is eveolved from the Urda tribe), Oddiyana,
Kamala Mandala, South Kosala, Kongoda,
Trikalinga, Tosali.

The history of Odisha can be traced back to the prehistoric

days. The pre-historic culture of Odisha was
very different from that of the northern part of India. During
lower Paleolithic times the Acheulian
tools was prevalent in the districts of Mayurbhanj, Keonjhar,
Sundargarh and Sambalpur in Odisha. The
Gudahandi hills in Kalahandi district have paintings and rock
carvings dating to Upper Paleolithic
times. Some of the rocks, like the Mayurbhanj granite pluton,
have been dated to 3.09 billion years ago.
Prehistoric paintings, inscriptions, pieces of pottery and tools
like hoes, chisels, pounders, mace
heads, grinding stones have been found in different parts of the
state.</p>
84
 </Div>
<div class="sub-head" id="section1">
<h1>Early History of Odisha :</h1>
<p>Ashoka and Kalinga War Ashoka of the Mauryan dynasty
conquered Kalinga in the bloody Kalinga War in
261 BCE which was the 8th year of his reign. According to his
own edicts, the war about 1,000,000
people were killed, 1,500,000 were captured and several more
were affected. The resulting bloodshed
and suffering of the war deeply affected Ashoka. He turned
into a pacifist and converted to
Buddhism. The Kalingans had used personnel from the
Atavika region, which was in the west of
Kalinga, during the war. According to his edicts, Ashoka
conquered the coastal region of Kalinga but
didn't try to conquer the Atavika region. The Mauryans
governed the Kalinga region as a province.
They used Tosali as the regional capital and judiciary center. A
kumara (viceroy) ruled from Tosali,
modern-day Dhauli. Samapa, modern-day Jaugada, was
another administrative centre. Ashoka erected two
edicts in the region, at Jaugada and Dhauli.

In the 1st century BCE, Mahameghavana established the

Mahameghavahana dynasty in Kalinga. Kharavela
was the third ruler of the dynasty. He reigned in the second
half of the 1st century BCE. Most of
the information about Kharavela comes from the Hathigumpha
inscription in Udayagiri near
Bhubaneswar. The inscription also calls the dynasty as Chedi
(also spelled Cheti) but it is not the
same as the Chedi kingdom of western India.

</p><br><br>

<h1 class="subpoint" id="section2">Medieval History</h1>

<h2 class="otpoint" id="section3">
Gajapati Dynasty :
</h2>

85
 <p>The Gajapati Dynasty was established by Kapilendra Deva in
1435, after the fall of the last Eastern Ganga
king, Bhanudeva IV. The dynasty is also known as a
Suryavamsi dynasty. In about 1450, Kapilendra Deva
installed his eldest son, Hamira, as the governor of
Rajamundry and Kondavidu. Kapilendra Deva managed
spread his kingdom from Ganga in the north to as far as Bidar
in the south by 1457. During Kapilendra
Deva's reign, Sarala Dasa, the Odia poet, wrote the Odia
Mahabharata and his other works. When
Kapilendra Deva died in 1467, a civil war occurred to capture
the throne, among his sons. In the end,
Purushottama Deva succeeded in securing the throne in 1484
by defeating Hamvira.</p>

<h2 class="otpoint" id="section4">

Mukunda Deva :
</h2>

<p>Mukunda Deva (also known as Mukunda Harichandana)

came to throne, in 1559, in a bloody coup. According to
the Madala Panji (temple records), he was a Chalukya. During
this period, Odisha was going through many
internal conflicts. Mukunda stuck an alliance with Akbar, that
he made him a foe of Sulaiman Khan
Karrani, the ruler of Bengal. Sulaiman sent his son, Bayazid
Khan Karrani and his infamous general,
Kalapahad, to conquer Odisha, in 1567.</p>

<h2 class="otpoint" id="section5">

Bengal (Karrani) rule :

</h2>

<p>In 1568, Odisha came under the control of Sulaiman Khan

Karrani of the Karrani dynasty,
who was the ruler of Sultanate of Bengal. In the Battle of
Tukaroi, which took place in

86
 modern-day Balasore, Daud Khan Karrani was defeated and
retreateddeep into Odisha.
The battle led to the Treaty of Katak in which Daud ceded the
whole of Bengal and
Bihar,retaining only Odisha. The treaty eventually failed after
the death of Munim Khan
(governor of Bengal and Bihar) who died at the age of 80.
Daud took the opportunity and
invaded Bengal.This led to the Battle of Rajmahal in 1576,
where Daud was defeated and executed.</p>

<h2 class="otpoint" id="section6">

Mughal rule :

</h2>
<p>In 1590, Qutlu Khan Lohani, an officer of Daud, declared
himself independent and assumed
the title of "Qutlu Shah". Raja Man Singh who was the Mughal
governor of Bihar, started an expedition
against him. Before facing Man Singh, Qutlu Shah died. Qutlu
Khan's son Nasir Khan, after little
resistance, accepted Mughal sovereignty and paid homage to
Man Singh on 15 August 1590. Nasir Khan was
then appointed Governor of Odisha and signed a treaty which
ceded the region of Puri.
<p>

<h2 class="otpoint" id="section7">

Under Akbar Rule :

</h2>
<p>Raja Ramachandra Deva, the king of Khurda, had accepted
Akbar's suzerainty. Akbar mostly followed a
policy of non-interference in the local chieftains' matters. After
Akbar, his son, Jahangir came to
power, who followed a different policy.</p>

<h2 class="otpoint" id="section8">

Under Shah Jahan :
</h2>
87
 <p>In 1628, Shah Jahan became the Mughal emperor and
Muhammad Baqar Khan was appointed the governor of
Odisha. He extended his influence well into the kingdom of
Golconda. In 1632, he was recalled. Shah
Shuja was appointed by Shah Jahan as the Subahdar of Bengal
from 1639 until 1660. From 1645 onwards, a
deputy of Shuja called Zaman Teharani was the governor of
Odisha.</p>

<h2 class="otpoint" id="section9">

Under Aurangzeb :
</h2>
<p>In 1658, Shah Jahan took ill and Dara Shikoh took on as the
royal regent. This led to a war of succession
in which Aurangzeb emerged victorious in 1659. He
imprisoned his own father, who later died in 1666.
During this period of instability in the Mughal empire, several
chieftains in Odisha had declared
independence.</p>

<h2 class="otpoint" id="section10">

Maratha rule :
</h2>
<p>The river Subarnarekha served as the border between Bengal
and Maratha-controlled Odisha. Marathas used
to collect a pilgrimage tax at Puri, which was exempt for
paupers.
In 1803, the British conquered the region during the Second
Anglo-Maratha War, when most of the Maratha
forces were engaged elsewhere.</p>
</div>
</Div>
</body>

</html>

88
histmain.css:-

@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
}

body {
background-color: rgb(85, 85, 237);
font-family: 'Times New Roman', Times, serif;
}

.Container {
border: 5px;
padding: 40px 20px;
box-shadow: 5px 10px inset;
border-radius: 3px;
background-color: aqua;
background-image: linear-gradient(to right, rgb(255, 136, 0), rgb(255,
255, 247), rgb(16, 112, 16));
position: relative;
}

div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}

div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;

89
 text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #777;
}

.Heading h1 {
border-style: outset;
border-color: blue;
background-color: rgb(161, 194, 194);
border-width: 3em;
text-align: center;
}

.Heading p {
text-align: justify;
line-height: 2rem;
margin: 2rem;
}

.sub-head h1 {
text-align: left;
font-size: 30px;
color: blue;
background-color: transparent;
margin: 2rem;
text-decoration: underline;
}

.sub-head p {
text-align: justify;
line-height: 2rem;
margin: 2rem;
}

.otpoint {
margin: 3rem;
color: blue;
text-decoration: underline;
90
}

.scrollmenu {
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1vw 8vw;
align-items: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.20);
background-color: rgb(222, 237, 243);
z-index: 999;
}

Eminent.php:-

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="eminent.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css" />
</head>

<body>
<div class="btn">
<a href="discover.php"><button>Go Back</button></a>
</div>

91
 <div class="container">

<div class="box">

<div class="image">
<img src="Eminent/veer-surendra-sai_1.jpg" alt="">
</div>
<div class="name_job">Veer Surendra Sai</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>23/01/1809
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Khinda
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Asirgarh Fort
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href =
'Eminent/veersurendrasai.php'; ">Read More</button>

</div>
</div>

<div class="box">
92
 <div class="image">
<img src="Eminent/ramachandra-bhanja_1.jpg" alt="">
</div>
<div class="name_job">Maharaja Sri Ramchandra Bhanj
Deo</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>17 Dec 1870
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>India
<td>
</tr>
<tr>
<th> Place of Death :</th>
<td>KolKata
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/bhanj.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/nilamani-routray_1.jpg" alt="">
</div>
<div class="name_job">Sri. Nilamani Routray</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
93
 <td>24/05/1920
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Mukundapur, Balasore dist
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Cuttack, Odisha
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href =
'Eminent/nilamani.php'; ">Read More</button>
</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/nilakantha-das_1.jpg" alt="">
</div>
<div class="name_job">Nilakantha Das</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>05/08/1840
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Puri
<td>
</tr>
<tr>
94
 <th> Place of Death:</th>
<td>Cuttack (6 Nov,1967)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/nilkanth.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/nandini-satapathy_1.jpg" alt="">
</div>
<div class="name_job">Nandini Satapathy</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>09/07/1931
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Puri
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td> Bhubaneshwar (4 Aug,2006)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href =
'Eminent/nsathapathy.php'; ">Read More</button>
95
 </div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/madhusudan-das_1.jpg" alt="">
</div>
<div class="name_job">Utkal Gourav Madhusudan Das</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>28/04/1848
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Satyabhamapur
<td>
</tr>
<tr>
<th>Place of Death:</th>
<td>Cuttack (4 Feb,1934)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/madhu.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
96
 <img src="Eminent/kalandi-charan_1.jpg" alt="">
</div>
<div class="name_job">Kalindi Charana Panigrahi</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>02/07/1901
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>India
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Cuttack (15 May,1991)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/kalandi.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/jayee-rajguru_1.jpg" alt="">
</div>
<div class="name_job">The Great Revolutionary Leader Jayee
Rajguru
</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
97
 <td>29th October 1739
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Biraharekrushnapur, Puri, Odisha
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Medinipur, Bengal (6 Dec,1806)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/jayee.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/harekrushna-mahatab_1.jpg" alt="">
</div>
<div class="name_job">Dr. Harekrushna Mahatab</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>21/11/1899
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Bhadrak
<td>
98
 </tr>
<tr>
<th> Place of Death:</th>
<td>Bhubaneshwar (2 Jan,1987)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href =
'Eminent/harekrushna.php'; ">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/gopabandhu_1.jpg" alt="">
</div>
<div class="name_job">Pandit Gopabandhu Das</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>09/10/1877
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Suando, Puri district
<td>
</tr>
<tr>
<th>Death:</th>
<td>17/06/1928
<td>
</tr>
</table>
<div class="btns">
99
 <button onclick="window.location.href =
'Eminent/gopalbandhu.php'; ">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/gajapati-krushnachandra_1.jpg" alt="">
</div>
<div class="name_job">Gajapati Maharaja Krushna Chandra
Dev</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>29/11/1941
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>India
<td>
</tr>
<tr>
<th>Death:</th>
<td>(25 May,1974)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/gajju.php';
">Read More</button>

</div>
</div>

100
 <div class="box">
<div class="image">
<img src="Eminent/fakker-mohan_1.jpg" alt="">
</div>
<div class="name_job">Fakir Mohan Senapati</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>13/01/1843
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Baleshwar, India
<td>
</tr>
<tr>
<th>Death:</th>
<td>(14 june, 1918)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/fakker.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/chandra-sekhar_1.jpg" alt="">
</div>
<div class="name_job">Chandra Sekhar Behera</div>
<table style="width:100%">
<tr>
101
 <th>Born Date:</th>
<td>20/05/1873
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Dhankauda Village, Sambalpur Town
<td>
</tr>
<tr>
<th>Death:</th>
<td>(23 Jan,1936)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/behra.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/chakhi-khuntia_1.jpg" alt="">
</div>
<div class="name_job">Chakhi Khuntia (Chandan Hajuri)</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>20/01/1827
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Puri
102
 <td>
</tr>
<tr>
<th> Place of Death:</th>
<td> Puri (1870)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href =
'Eminent/khunntia.php'; ">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/buxi-jagabanchu_1.jpg" alt="">
</div>
<div class="name_job">Buxi Jagabandhu</div>
<table style="width:100%">
<tr>
<th> Year of Born :</th>
<td> 1773
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Gadarondoga, Puri
<td>
</tr>
<tr>
<th>Death:</th>
<td>Cuttack (1829)
<td>
</tr>
</table>
103
 <div class="btns">
<button onclick="window.location.href = 'Eminent/buxi.php';
">Read More</button>
</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/biswanath-das_1.jpg" alt="">
</div>
<div class="name_job">Biswanath Das</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>08/03/1889
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Belagan
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Cuttack (2 June,1984)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/bdas.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
104
 <img src="Eminent/biju-patnaik_1.jpg" alt="">
</div>
<div class="name_job">Biju Patanaik</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>05/03/1916
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Cuttack
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>New Delhi (17 April,1997)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/biju.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/baji-rout_1.jpg" alt="">
</div>
<div class="name_job">Amar Saheed Baji Rout</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>05/10/1926
<td>
105
 </tr>
<tr>
<th>Place of Birth:</th>
<td>Nilakanthapur, Odisha
<td>
</tr>
<tr>
<th> Place of Death:</th>
<td>Nilakanthapur, Dhenkanal (11 October,1938)
<td>
</tr>
</table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/baji.php';
">Read More</button>
</div>
</div>
<div class="box">
<div class="image">
<img src="Eminent/artatrana-deo_1.jpg" alt="Not Found">
</div>
<div class="name_job">Raja Artatran Deo</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>1890
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Kalahandi, Odisha
<td>
</tr>
<tr>
<th>Death:</th>
<td>1946
<td>
</tr>
106
 </table>
<div class="btns">
<button onclick="window.location.href = 'Eminent/trana.php';
">Read More</button>

</div>
</div>

<div class="box">
<div class="image">
<img src="Eminent/acharya-harihara_1.jpg" alt="Acharya
Harihara">
</div>
<div class="name_job">Acharya Harihara</div>
<table style="width:100%">
<tr>
<th>Born Date:</th>
<td>08/03/1879
<td>

</tr>
<tr>
<th>Place of Birth:</th>
<td>Shrirampur, Puri district
<td>
</tr>
<tr>
<th>Death:</th>
<td>12 Feb,1971
<td>
</tr>
</table>
<div class="btns">
<button
onclick="window.location.href=
'Eminent/acharya.php'; ">Read
More</button>
</div>

107
 </div>

</div>
</body>

</html>
eminent.css:-

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}

::selection {
background: #8e44ad;
color: #fff;
}

html,
body {
display: grid;
height: 100%;
place-items: center;
background: #8e44ad;
}

.container {
max-width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 20px;
grid-gap: 20px;
}

.container .box {
108
 width: calc(50% - 10px);
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 30px;
border-radius: 5px;
margin-bottom: 10px;
border: 1px solid;
box-shadow: 8px 10px 30px rgb(35, 14, 155) inset;
}

.box .quote i {
margin-top: 10px;
font-size: 45px;
color: #17c0eb
}

.container .box .image {

margin: 10px 0;
height: 150px;
width: 150px;
background: #8e44ad;
padding: 3px;
border-radius: 50%;
}

.box .image img {

height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
}

.box p {
text-align: justify;
margin-top: 8px;
font-size: 16px;
109
 font-weight: 400;
}

.box .name_job {
margin: 10px 0 3px 0;
color: #8e44ad;
font-size: 18px;
font-weight: 600;
}

.rating i {
font-size: 18px;
color: #8e44ad;
margin-bottom: 5px;
}

.btns {
margin-top: 20px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
width: 100%;
}

.btns button {
background: #8e44ad;
width: 100%;
padding: 9px 0px;
outline: none;
border: 2px solid #8e44ad;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
font-weight: 400;
color: #8e44ad;
transition: all 0.3s linear;
}

.btns button:first-child {
background: none;
110
 margin-right: 5px;
}

.btns button:last-child {
color: #3679c7;
margin-left: 5px;
}

.btns button:first-child:hover {
background: #8e44ad;
color: #fff;
}

.btns button:hover {
color: #fff;
}

@media (max-width:1045px) {
.container .box {
width: calc(50% - 10px);
margin-bottom: 20px;
}
}

@media (max-width:710px) {
.container .box {
width: 100%;
}
}

nilamani.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
111
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="emppl.css">
</head>
<body>
<div class="marqu">
<marquee class="animate" behavior="" direction="left"><a
href="eminent.php"> EMINET PEPOPLE OF ODISHA</a></marquee>
</div>

<Div class="container">

<Div class="main">

<h1 class="mainhead">
"Sri. Nilamani Routray"
</h1>
</Div>
<Div class="detail">
<img src="nilamani-routray_1.jpg" alt="">

</Div>
<Div class="info">
<p><strong >Sri. Nilamani Routray</strong><br> Sri. Nilamani
Routray was born at Mukundpur of Balasore district.
He was a Graduate in Arts and Law. was the Secretary of Oriya
Samaj of Calcutta.<br> He was the Chief Minister
of Odisha from 1977 to 1980. He was elected to the Lok Sabha in
1989.He served as the<strong class="pimp" >Health and Family
Welfare Minister and then Forest and Environment Minister in the
Union Government.</strong> He was the president
of the Odisha state unit of the Indian National Congress from 1967
to 1970. <br>Later he joined the Utkal
Congress and became its president. Subsequently, he switched over
to the Bharatiya Lok Dal and became
the president of its state unit.</p>
112
 </Div>
</Div>

</body>
</html>

Gopalbandudas.php:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="emppl.css">
</head>
<body>
<div class="marqu">
<marquee class="animate" behavior="" direction="left"><a
href="eminent.php"> EMINET PEPOPLE OF ODISHA</a></marquee>
</div>

<Div class="container">

<Div class="main">

<h1 class="mainhead">
"The Jewel of Utkal,"
</h1>
</Div>
<Div class="detail">
<img src="gopabandhu_1.jpg" alt="">

113
 </Div>
<Div class="info">
<p><strong >Pandit Gopabandhu Das</strong><br>was in the true
sense a jewel and friend of the poor.
Born on 9th October 1877, in Suando Village near Sakshigopal of
Puri District,
he started his education career in Vernacular language initially at
Rupadeipur
minor school and then at Puri Zilla School. Gopabandhu had lost
his mother Swarnamayee
Devi after few months of his birth and also lost his father Daitari
Dash while he was a
student at Ravenshaw College. Inspite of his great personal loss, he
had written poems like
"Abakasha Chinta", Go-mahatmay, Nachiketa upakhyana,
Karakabita, Dharmapada and "Bandira Atmakatha"
when he was continuing at Revenshaw College.</p>

</Div>
</Div>

</body>
</html>

emppl.css:-

Emppl.css
@import
url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Founda
tion:wght@500&display=swap');
*{
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}

.mainhead {

114
 text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 20px;
text-shadow: 0 0 3px #0849ec, 0 0 5px #dd7129;
}

.detail img {
float: left;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-style: inset;
border-color: rgb(245, 63, 245);
border-radius: 50%;
}

.info p {
text-align: justify;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
float: left;
line-height: 1.rem;
border: 1px solid;
padding: 20px;
box-shadow: 5px 10px inset #6a4ab9;
line-height: 2em;
}

.info strong {
font-size: 20px;
line-height: 4rem;
}

.container {
background-color: rgb(106, 87, 232);
width: fit-content;
115
 opacity: 95%;
}

.container .main .mainhead {

border-style: outset;
}

.container .main .mainhead h1 {

color: #0849ec;
}

.animate {
font-size: 2rem;
text-shadow: 0 0 3px #0849ec, 0 0 5px #dd7129;
}

.marqu a {
text-decoration: none;
color: #0849ec;
}

Cusines.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>webIQ</title>

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

<link rel="stylesheet" href="">
</head>

<body>

116
 <div class="grid">
<a href="discover.php"><button>Go Back &larr;</button></a>

<h1 class="head">
The Taste of Odisha

</h1>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chhena-jalebi.jpg" alt="Rome" />
<div class="card-content">
<h1 class="card-header">CHHENA JALEBI
</h1>
<p class="card-text">
Be ready to savour the taste of saccharine Chenna Jalebi
while on an Odisha tour. Chhena Jalebis are
bit different from the regular ones as they are more thick and
heavy in size and also includes a
special ingredient called Chhena, a fresh curd cheese.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="malpua.jpg" alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">MALPUA</h1>
<p class="card-text">
One of the oldest traditional desserts of India, Malpua in
Odisha is a small deep fried pancakes
soaked in a sugary syrup and served hot. It is one of the
popular dishes of the region which is served
to Lord Jagannath of Puri.

</p>

</div>
</div>
117
 </div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="dalma.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Dalma-The wholesome food of
Odisha</h1>
<p class="card-text">
Dalma is essentially dal (lentil) cooked with an assortment of
vegetables and spices. Apart from being
a part of the main course, people relish the dish with a variety
of dishes like Dalma with Pitha
(local pancake), Dalma with Vada (fried lentil cake). The
high protein and healthy dish is the most
essential component of any Odia meal.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="pakhla.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Pakhala-The coolest food of
Odisha</h1>
<p class="card-text">
Pakhala is essentially rice which is fermented overnight with
water and consumed with an accompaniment
of fried vegetables and fish. Pakhala is the food for an Odia
especially during the summers. The food
is known to be a preventive for heat stroke- which is quite
prevalent in the region during the summers
and some researchers opine that it’s the only food which has
vitamins for the nerve cells.Having
Pakhala by spoon is akin to having chowmein by hand!
</p>

</div>
</div>
118
 </div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="pithas.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Pitha -The food for the
occasion</h1>
<p class="card-text">
Pitha is essentially cereal based steamed cake. It’s the food
for any occasion from the perspective of
an Odia household. The dish has many variants and much
sought after amongst them are ChakuliPitha,
PodaPitha, Monda, etc </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chungdi-malai.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">CHUNGDI MALAI</h1>
<p class="card-text">
Chungdi Malai is probably the most delicious seafood platter
in the state. This non-vegetarian dish is
a rich and thick prawn curry. Spices and coconut milk are the
major ingredients that give this dish a
tangy and creamy taste.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="oriya-chenna-poda-recipe.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">CHENNA PODA</h1>
119
 <p class="card-text">
Chhena Poda or Chenna Poda is one of the much-celebrated
sweet dishes from the beautiful state of
Odisha. Its made with chenna or fresh paneer, sugar and
flavorings. The ingredient list of the Chhena
Poda Recipe is minimal, but then, it does take some time to
get done as it has to be baked. The
classic preparation actually uses a chulha (small earthen/brick
stove). Since at home, you bake it in
an oven, it can also be referred to a paneer cake.Chena poda
literally translates to roasted cheese in
the English language. Its also said that chhena poda is the
favorite sweet of Lord Jagannath (The
presiding deity of Puri Jagannath temple in Odisha). Chena
poda is also made during festivals like
Diwali or Durga puja.
</p>

</div>
</div>
</div>

</div>
</body>

</html>

Cusi.css:-

@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
}

html {
box-sizing: border-box;

120
 font-size: 62.5%;
}

body {
background-image: radial-gradient(circle, rgb(230, 91, 75), rgb(24,
235, 73), rgb(24, 185, 142));
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.grid button {
font-size: 30px;
margin-bottom: 20px;
}

.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.grid-item:hover {
121
 transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
}

.card-content {
padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
122
 transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}

.head {
font-size: 5rem;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}

@import
url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Founda
tion:wght@500&display=swap');
*{
margin: 0;
padding: 0;
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

123
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
124
}

.card-content {
padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}
125
.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}

.head {
font-size: 5rem;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-style: inset;
border-width: 30px;
border-color: #3363ff;
padding-bottom: 10px;
margin-bottom: 10px;
background-image: radial-gradient(circle, red, yellow, green);
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}
126
}

beaches.php-:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Beaches Of Osidha
</title>
<link rel="stylesheet" href="beaches.css">
</head>
<body onload="slider()">
<div class="maindiv">
<div class="slider">
<video src="beaches/bvideo.mp4" autoplay muted></video>
</div>
<div class="overlay">
<div class="navbar">
<div class="logo">
<img src="ED.jpg" alt="">
</div>
</div>
<div class="content">
<h1>Lets Explore The Beaches of Odisha</h1>
<h3>Odisha Indias Best Kept Secret</h3>
<div>
<button type="button"
onclick="location.href='discover.php'">Home</button>
<button type="button"
onclick="location.href='beachinfo.php'">Click to Explore</button>
</div>
</div>

127
 </div>
</div>
</script>

</body>
</html>

Beaches.css
@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
}

.maindiv {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}

.slider {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}

#slideImg {
width: 100%;
}

.overlay {
width: 100%;
height: 100vh;
position: absolute;
128
 top: 0;
}

.navbar {
width: 100%;
display: flex;
align-items: center;
margin: 10px auto;
margin-left: 5px;
}

.logo img {
width: 120px;
cursor: pointer;
}

.content {
width: 60%;
margin: 160px auto 0;
text-align: center;
color: #FFF;
}

.content h1 {
font-size: 30px;
}

.content h3 {
width: 80%;
margin: 20px auto 100px;
font-weight: 100;
line-height: 20px;
}

button {
width: 200px;
padding: 15px 0;
text-align: center;
margin: 0 10px;
border-radius: 25px;
129
 font-weight: bold;
border: 2px solid #fe7350;
background: #fe7350;
color: #FFF;
cursor: pointer;
transition: background 0.5s;
}

button:hover {
background: transparent;
border: #FFF;
}

beachesinfo.php:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="beachinfo.css">
</head>
<body>
<a href="discover.php"><button>Go Back &larr;</button></a>
<div class="maindiv">

<div class=image>

<img src="beaches/Paradeep Beach.jpg" width="50%" alt="">

<h1>Paradeep Beach</h1>
<h2>about</h2>
<p>Located 125 Km from the capital city Bhubaneswar, Paradip
is one of the most important commercial ports of the country. The beach
with green forest cover, natural creeks and an island is one of the most

130
popular beaches of the state.Clear blue waters surrounded by green
forest cover and its location at the confluence of the river Mahanadi with
Bay of Bengal, makes Paradip one of the most sought after beaches of
the state. A leisurely drive along the marine drive with the setting sun in
the horizon is one of the highlights of this beautiful beach destination of
Odisha.

The sight of huge cargo ships anchored in the port always entices the
photographers for that one perfect shot for posterity.

Things to do
One can indulge in the usual beach activities but always enlist the help
of the lifeguard before venturing into the sea.
Steal a moment for yourself, bask in the serene settings and savour the
beauty of solitude.
Paradip Marine Aquarium – the small boat shaped building houses a
variety of marine and fresh water animals and offers a good
entertainment especially for the children
One can visit the port with necessary permissions.
Located 125 Km from the capital city Bhubaneswar, Paradip is one of
the most important commercial ports of the country. The beach with
green forest cover, natural creeks and an island is one of the most
popular beaches of the state.

Clear blue waters surrounded by green forest cover and its location at the
confluence of the river Mahanadi with Bay of Bengal, makes Paradip
one of the most sought after beaches of the state. A leisurely drive along
the marine drive with the setting sun in the horizon is one of the
highlights of this beautiful beach destination of Odisha.

The sight of huge cargo ships anchored in the port always entices the
photographers for that one perfect shot for posterity.

**Always remember that vacations are meant to be reminisced as happy

memories. Enjoy responsibly and be sensitive to the environment.**

</p>
</div>
<section id="Member">
<h1>OTHER THINGS TO DO</h1>
131
 <Div class="member-box">
<div class="members">

<img src="Beaches2/Boating.jpg" alt="">

<div class="details">
<h3>Boating</h3>

</div>
</div>
<div class="members">

<img src="Beaches2/bird.jpg" alt="">

<div class="details">
<h3>Bird Watching</h3>

</div>
</div>
<div class="members">

<img src="Beaches2/Trekking.jpg"alt="">

<div class="details">
<h3>Trekking</h3>
</div>

</div>
</Div>

</section>
<div class="map">
<p>Way to Pradeep Beach</p>
<p><iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29
945.19485467908!2d86.64007569024744!3d20.2526395811065!2m3!1f
0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1a4b7f6dc12115
%3A0x2fbbc4656b48a274!2sParadeep%20Sea%20Beach!5e0!3m2!1se
n!2sin!4v1675965221653!5m2!1sen!2sin"

132
 width="350" height="200" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe></p>
</div>
<div class=image>

<img src="beaches/chandipurbeach.jpg" width="45%" alt="">

<h1>Chandipur Beach</h1>
<h2>about</h2>
<p>
Chandipur is a beach like no other. During low tides the beach recedes
upto 5 KM offering visitors the opportunity to walk on the sea bed. This
unique phenomenon helps the beach to support its equally unique
biodiversity.It is home to the endangered horse shoe crabs, star fish, sea
urchins to name a few. The water of the beach is muddy making it
unsuited for bathing.

Things to do
While walking on the sea bed during low tides always ensure that you
heed the advice of the locals for the water comes rushing in during high
tides
The confluence of the Buddhbalanga River is a scenic spot and popular
amongst locals a picnic spot.
The Panchalingeswara temple located 41KM from Chandipur is a
revered temple of the region.
<b>**Always remember that vacations are meant to be reminisced as
happy memories. Enjoy responsibly and be sensitive to the
environment</b>
</p>
</div>
<section id="Member">
<h1>OTHER THINGS TO DO</h1>
<Div class="member-box">
<div class="members">

<img src="Beaches2/Shopping.jpg" alt="">

<div class="details">
<h3>Shopping</h3>

133
 </div>
</div>
<div class="members">

<img src="Beaches2/Chungudi.jpg" alt="">

<div class="details">
<h3>Food</h3>

</div>
</div>

</div>
</Div>

</section>
<div class="map">
<p>Way to Chandipur Beach</p>
<p><iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29
709.841863930782!2d87.00690409221676!3d21.439845939712576!2m
3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1c8d2852f5e
8e5%3A0xb1cf47d8f0b0c66b!2sChandipur%20Sea%20Beach!5e0!3m2
!1sen!2sin!4v1675966696329!5m2!1sen!2sin"
width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe>
</div>

<div class=image>

<img src="beaches/purib.jpg" width="45%" alt="">

<h1>Puri Beach</h1>
<h6>Where The Ocean Greets The Divine</h6>
<h2>about</h2>
<p>
The pilgrim town is famous for its golden beaches which forms
its eastern boundary. Considered one
of the safest beaches in the country, one can find tourists taking
to sea and enjoying a leisurely
134
 bath. The beach congregation of people throughout the day
except may be in the afternoon.Puri is one
of the few destinations which offers spiritual salvation along
with the thrill of nature. The Beach
offers tourists the solitude and serenity to soak in the mystical
charm of the city. Lined across
the beach of Puri are some of the most important relics of
history, like the Baulimatha – where Guru
Nanak stayed during his visit to Puri. The Matha located near
Swargadwar houses, where The Holy Guru
Granth Sahib is placed right next to Lord Jagannath.Things to do
The beach is mostly secluded at the break of dawn, an early morning
walk or simply sitting by the shore and watching the sunrise and the
waves splashing against beach makes for a magical experience.
Always enlist the help of Nulia (life guard) before going into the
sea.The beachmarket springs to life in the evening, the shops sell
anything from souvenir to utility items.In the evening’s kids can enjoy
the camel ride or horse ride in the beach,The road side stalls prop up
along the beach selling popular Indian snacks to sea food.There are
many shops selling Odisha handloom and textiles dotted along the road
next to the beach along with artefacts. For the shopaholics it makes for
an exciting prospect.
<b>**Always remember that vacations are meant to be
reminisced as happy memories. Enjoy responsibly and be sensitive to the
environment</b>
</p>
</div>
<section id="Member">
<h1>OTHER THINGS TO DO</h1>
<Div class="member-box">
<div class="members">

<img src="Beaches2/Boating.jpg" alt="">

<div class="details">
<h3>Boating</h3>

</div>
</div>
<div class="members">
135
 <img src="Beaches2/puriwatersports.jpg" alt="">

<div class="details">
<h3>Surffing</h3>

</div>
</div>
<div class="members">

<img src="Beaches2/Pattachitra.jpg"alt="">

<div class="details">
<h3>Pattachitra</h3>
</div>
</Div>

</section>
<div class=image>

<img class="gpmain" src="beaches/gopalpurbeach.jpg"

width="30%" alt="">
<h1>Gopalpur Beach</h1>
<h6>Where History Is Lost In Sands of Time</h6>
<h2>about</h2>
<p>
During ancient times, Gopalpur served as an important port for the
seafarers of ancient Kalinga. Even during the
World War –I, it was an important military port where soldiers used to
embark on a journey to Burma.Gopalpur was the place where the first
ever modern hotel was built in Odisha and probably the first ever beach
resort of the country. The Palm Beach Resort was built in 1914 by an
Italian gentleman by the name of Signor Maglioni to cater to the
merchants and businessmen. The hotel was bought by the Oberoi group
of hotels in 1948 in what was the group’s first venture into the
hospitality business. Currently the hotel is owned by the Mayfair Group
of Hotels.
The casuarina groves that line up the sun kissed beach makes for
enchanting sight. The beach is mostly secluded and one of the cleanest
beaches in the country.Things to do 1d29709
136
The sea is too rough for swimming, hence we advise you not to
indulge.As the beach is east facing, the sunrise and sunsets are
spectacular.
It is the best place to steal a quiet moment to yourself and a stroll along
the shore is quite rejuvenating
A walk through the town one comes across many an old dilapidated
buildings from a bygone era which lends character
to this quaint beach town.For the sea food lovers a stroll to the early
morning fish market is recommended.
<b>**Always remember that vacations are meant to be reminisced as
happy memories. Enjoy responsibly and be sensitive to the
environment</b>
</p>
</div>

<section id="Member">
<h1>OTHER THINGS TO DO</h1>
<p class="otdeal">While you are at Gopalpur, be sure to experience
the magical sunsrise & sunsets, steal a moment of
solitude & enjoy a scenic boat ride.</p>
<Div class="member-box">
<div class="members">

<img class="goapal" src="Beaches2/Boating.jpg" alt="">

<div class="details">
<h3>Boating</h3>

</div>
</div>

</section>

</div>
</body>
</html>

137
beachesifo.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
font-family: 'Times New Roman', Times, serif;
}

.image h1 {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25%;
margin-right: 25%;
margin-top: 10px;
}

nav {
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1vw 5vw;
align-items: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.20);
background-color: rgb(222, 237, 243);
z-index: 999;
}

nav img {
width: 215px;
cursor: pointer;
}

nav .navigation ul {
display: flex;
138
 justify-content: flex-end;
align-items: center;
}

nav .navigation ul li {
list-style: none;
margin-left: 30px;
}

nav .navigation ul li a {
text-decoration: none;
color: rgb(21, 21, 100);
font-size: 16px;
font-weight: 500;
}

nav .navigation ul li a:hover {

color: #FDC93B;
transition: 0.5s ease;
}

.image img {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25%;
margin-right: 25%;
margin-top: 10px;
}

.image h2 {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25%;
margin-right: 25%;
margin-top: 10px;
text-decoration: underline slateblue;
}

139
.image h6 {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25%;
margin-right: 25%;
margin-top: 10px;
text-decoration: underline slateblue;
font-size: 20px;
}

.image p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 4em;
margin-right: 4em;
line-height: 2;
}

.maindiv h2 {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25%;
margin-right: 25%;
margin-top: 10px;
font-size: 20px;
}

#Member {
padding: 3vw 3vw 0 3vw;
text-align: center;
}

#Member .member-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 1rem;
margin-top: 30px;
140
}

#Member .members {
text-align: start;
}

#Member .members img {

background-size: cover;
background-position: center;
width: 80%;
height: 80%;
}

#Member .members .details {

padding: 25px 25px 0 5px;
}

#Member h1 {
font-size: 30px;
background-color: aqua;
}

#Member .members .details h3 {

background-color: brown;
width: fit-content;
}

.map p {
font-size: 30px;
text-align: center;
}

#Member .members .goapal {

width: 50%;
}

#Member p {
font-size: 20px;
line-height: 30px;
}
141
.image .gpmain {
width: 60%;
}

wild.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>webIQ</title>

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

<link rel="stylesheet" href="">
</head>

<body>
<div class="grid">
<h1>Wildlife of Odisha</h1>
<a href="discover.php"><button>Go Back &larr;</button></a>

<div class="grid-item">
<div class="card">
<img class="card-img" src="satakosia-wl.jpg" alt="Rome" />
<div class="card-content">
<h1 class="card-header">Satakosia Gorge</h1>
<p class="card-text">
Satkosia Gorge Sanctuary receives its name from the
narrow stretch of River Mahanadi that is Sat-Kosh or seven miles long
near Tikarpada, 60km south of Angul. Here Mahanadi has cut across the
Eastern Ghats and is known for the Gharials, Mugger crocodile
and rare freshwater Turtles like Chitra indica and
Trionyx(Aspideretes) gangeticus. The Gorge is famous for the scenic
beauty and boating experiences in Mahanadi. A Nature Interpretation
Center at Tikarpada supplements an ecotourist's

142
 search for subject and thrill. A journey to stay in the Eco
cottages/tented accommodation at Chhotkei, Purunakote, Tikarpada,
Baghmunda Tarava & Baliput offer scope for a chance encounter with
Tiger, Leopard, Elephant, Indian Bison,
Sambar, Spotted Deer, Barking Deer varieties of resident
and migratory birds like Oriental Pied Hornbills and Indian Skimmers.
The composite Satkosia-Baisipalli sanctuary having an area of 963.87
Sq.kms. is declared as “Satkosia
Tiger Reserve” during 2007.
</p>
<h1>How to reach</h1>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="ushakothi-wl.jpg" alt="Grand
Canyon" />
<div class="card-content">
<h1 class="card-header">Ushakothi Wildlife
Sanctuarye</h1>
<p class="card-text">
Finding its origin in the year 1962, Ushakothi wildlife
sanctuary offers a soulful experience to wildlife lover “Badrama Wildlife
Sanctuary”, which is also known as “Ushakothi Sanctuary” is situated at
a distance of 37 Km. from the district headquarters
of Sambalpur District towards Deogarh on National
Highway-6. The sanctuary comprises parts of Badrama Reserve Forests,
Ushakothi Reserve Forests, Binjipali Reserve Forests and Additional
Kansar Reserve Forests. The Sanctuary is
characterized by the presence of Moist Sal Forests, Sal
dominated mixed deciduous Forests and bamboo forests. The Sanctuary
forms a significant part of the Sambalpur Elephant Reserve.

</p>

</div>
</div>
143
 </div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="khalasuni-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Khalasuni Wildlife
Sanctuary</h1>
<p class="card-text">
Khalasuni Wildlife Sanctuary is situated on a hilly terrain
that ranges from 220 meters to 50 meters. Popular for housing rare
variety of birds like peafowl, jungle fowl and hornbills, this wildlife
sanctuary is a part of Sambalpur Elephant Reserve. The
adjoining Badrama Wildlife Sanctuary makes it an abode
of diverse fauna. The Khalasuni-Satkosia corridor is an important
elephant corridor in the state. Other animals like Cats, Wolves, Civets
and Leopards are also found here.
</p>
<button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="kuldiha-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Kuldiha Wildlife Sanctuary</h1>
<p class="card-text">
Spread out in an area of 282 sq km, Kuldiha Wildlife
Sanctuary in Balasore district is pristine forest land. The Sanctuary
includes Kuldiha, Devgiri and Tenda Reserved Forests and other
Protected Forests. Kuldiha sanctuary area, adjoining Nilgiri forest
in the North and Mayurbhanj Forest in West, is a typical
representative of a mixture of peninsular(coastal) Sal forest and moist
mixed deciduous forest. It comes in the Biogeographic region of the
Deccan peninsular zone which is
of enormous genetic and ecological importance with a
variety of flora and fauna. The significance of the Kuldiha Wildlife
144
Sanctuary can be categorized as follows: It abodes a number of
endangered and threatened wild animal species
like Asiatic Elephant, Leopard, Gaur, Mouse Deer,
Pangolin, Ratel, Giant squirrel etc. Besides that, some endangered bird
species like Hill Myna, Woodpecker, Hornbill and Eagles are also found
in the Sanctuary. It forms part of
the Mayurbhanj Elephant Reserve and linked to Similipal
Biosphere Reserve through Hadgarh Wildlife Sanctuary, thus forming a
vast landscape contributing to the cause of conservation of long-ranging
Asiatic Elephants and Tiger.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="nandankanan-wl.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Nandankanan Zoological
Park</h1>
<p class="card-text">
A unique zoo set inside a forest, Nandankanan Zoological
Park was established in 1960. It is a fascinating sanctuary built to ensure
that the Flora and Fauna thrive in a protected region in their natural
habitat. It is the first zoo in the world to have
successfully bred Melanistic and White Tigers. Amidst
the natural beauty and adorable Flora and Fauna, Nandankanan Zoo in
Bhubaneshwar is known as the Garden of Pleasure(as the very name)
which defines the imaginative beauty of
the celestial garden. Today, Nandankanan Zoological
Park has more than 34 white tigers in its vicinity. Besides, the park is
also the home to 67 varieties of mammals, 18 varieties of reptiles and 81
species of birds. The animals
that are frequently seen in the park are Asiatic Lion, Lion-
tailed Macaque, Indian Crocodiles, Nilgiri Langur, Indian Pangolin,
Himalayan Black Bear, Mouse Deer, Rhesus Macaque, Blackbuck and
more. By spreading over a sprawling

145
 area of 4.4 sq km, the park also noticed as the first
breeding place for Black Panthers. Nandankanan Zoological Park boasts
of a fascinating lake and wonderful lush green environs, which is a
virtual paradise for birds inviting
native as well as migratory birds. According to the forest
department, the park has around 75 bird species including some very
rare species of birds. Some of the popular birds that can be seen here are
the white peacock, blue &
yellow Macaw, open billed Stork, green-winged Macaw
etc. How to reach By Air The nearest Airport to Nandankanan is the
Bhubaneswar Airport which is at a distance of 13 kilometers. By Rail
The nearest Railway Station is the Bhubaneswar
Railway Station on the East-coast Railway station, which
has super fast trains connecting all the major cities. By Road There are
frequent buses that are also available from Bhubaneswar to the park. The
Nandankanan is well connected
to the major cities of Odisha. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="similipal-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Similipal National Park
</h1>
<p class="card-text">
Simlipal National Park is in a beautiful and scenic town
in Odisha. Situated in Mayurbhanj, it once used to be a hunting ground
for the rulers of the province. Simlipal is the largest wildlife sanctuary in
India and is also considered as one of the principal
tiger projects in India. Being derived from the name of
the silk-cotton tree which is locally called Simul, the area of Simlipal is
enriched with dense Forests, striking Meadows, startling Waterfalls and
mind-blowing Rivers and
is positioned at a plateau with an elevation of 900 m. The
area of Simlipal reserve is gifted with great bio-diversity and ultimate

146
varieties of Faunas in the ranges with the ambiance of cool breeze
emerging out of the dense forests.
The lush ambiance of Simlipal has been recognized as the
perfect location for forest camping which is open for the tourists during
the best season of Nov to mid-June. Also known as Simlipal Elephant
Reserve, it is a complete ecosystem
with forest vegetation along with the adjoining Santhal
tribal settlements. The total reserve area is accomplished with 2,750 sq
km at an average elevation of 559.31 meters(1,835.0 ft).

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="karlapat-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Karlapat Wildlife Sanctuary</h1>
<p class="card-text">
The Karlapat sanctuary is located in Kalahandi South
Division which is 12km from Bhawanipatna in Kalahandi district
covering a dense patch of lush green dry deciduous forest. A beautiful
waterfall, Phurlijharan has been developed as a picnic spot for
the local visitors and draws a large number of visitors
from far off places in and around Kalahandi District. Karlapat Wildlife
Sanctuary is home to a plethora of wildlife animals and birds. The
sanctuary is rich in wildlife such
as Leopard, Gaur, Sambar, Nilgai, Barking Deer, Mouse
Deer, Soft claws Ottawa, a wide variety of Birds and Reptiles.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
147
 <img class="card-img" src="kotagada-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Kotagada Wildlife
Sanctuary</h1>
<p class="card-text">
Located in Kalahandi South Division, 12 km from
Bhawanipatna, it is spread over an area of 148 sq km. Spread over 400
sq.km of deep and dense forests — over the jurisdiction of Kotgarh and
Tumudibandha ranges of Baliguda Forest Division under Kotgarh,
Tumudibandha and Daringbadi revenue blocks of
Baliguda sub-division — the sanctuary is one of the most important
wildlife reserves of Odisha with five reserve forests, three proposed
reserve forests and two deemed protected forests
within its fold. A known tiger habitat, the forest patch is
adjacent to an old elephant corridor from Boudh, Karlapat and Lakhari
valley in Gajapati district's Gandahati waterfall region. The lush green
dry deciduous forest and
the waterfall, Phurlijharan, makes it a paradise for nature
lovers. One can find Leopards, Gaur, Sambar, Nilgai, Barking Deer,
Mouse Deer, soft claws Ottawa and different species of Birds and
Reptiles here. How to reach By Air
Nearest Airport to Kalahandi is at Bhubaneswar and
Raipur which are about 418 km and 261 away respectively. By Rail
Nearest Railway Station is at Junagarh Road, Bhawanipatna and
Kesinga. By Road Kalahandi is connected by regular
bus services from many important cities in the state
including Koraput, Bhubaneswar and Berhampur. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="hadgarh-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Hadgarh Wildlife Sanctuary</h1>
<p class="card-text">

148
 Hadgarh is located in Keonjhar district and it is popular
for the Hadgarh wildlife Sanctuary and the dam that is created on River
Salandi. This wildlife sanctuary is located on 191 sq km of area. It was
first announced during the year 1978. It's the Salandi
River that uses to pass through this sanctuary. This is a
tributary river for River Baitarani. This region is rich in mixed deciduous
forest and plays home to a variety of wildlife. The wide range of fauna
that can be seen at Hadgarh
Wildlife Sanctuary in Odisha, India includes Leopard,
Tiger, Fishing Cat, Jungle Cat, Langur, Pangolin and Hyena. Hadgarh
Wildlife Sanctuary is also the abode of several species of birds and
reptiles. The conservation area of Hadgarh
Wildlife Sanctuary is very popular with the tourists who
wish to relish the wild and unspoiled natural environment. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="debrigarh-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Debrigarh Wildlife
Sanctuary</h1>
<p class="card-text">
It is a Wildlife Sanctuary in Sambalpur district, Odisha,
covering a total area of 353 sq.km. It is situated near Hirakud Dam.
Debrigarh Wildlife Sanctuary is an important site for in situ conservation
of wildlife and its habitat in the state of Odisha.
The sanctuary is famous for its sylvan beauty and pristine
wilderness. The dry deciduous forests with varied flora and fauna attract
the nature-lovers of Odisha and neighboring states every year. The
combination of dry deciduous
mixed forests with rich wildlife, Hirakud reservoir and
attractive topographical features are the important features of Debrigarh
wildlife sanctuary. It is said to be one of the vibrant wildlife sanctuaries
of the state.
</p>

149
 </div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="balukhand.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Balukhand Wildlife
Sanctuary</h1>
<p class="card-text">
Twenty-six kilometers from Puri, the Balukhand-Konark
Wildlife Sanctuary is a must-visit destination for nature lovers. Spread
over an area of 72 km square, the wildlife sanctuary is located between
Puri and Konark along the Bay of Bengal and so offers
a different experience than the other wildlife refuges in
the country. This Wildlife Sanctuary extends from Banki Muhan near
Puri to Keluni Muhan near Daluakani. The sanctuary is filled with lush
green vegetation, cashew and casuarina
plantations and mangrove forest. Its undisturbed sandy
beaches offer high potentialities for developing as a major eco-tourism
spot in Odisha. The sanctuary is covered by plantation of casuarina and
cashew trees. It is home to
herds of Herbivores(Spotted Deer), Monkeys, Jungle Cat,
Hyena, Monitor Lizard, Snakes etc. Olive Ridley sea turtles have seen
nesting on the beach. Balukhand-Konark Wildlife Sanctuary is traversed
by the rivulets such as Nuanai
River, Kusabhadra River, Kadua River and Prachi River.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chandaka-wl.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Chandaka Dampara Wildlife
Sanctuary</h1>
150
 <p class="card-text">
Chandaka-Dampara sanctuary spread over an area of
193.39 sq. Km on the upland of North-Eastern Ghat of the biotic region,
Chandaka-Dampara sanctuary is a treasure house of biodiversity. Spread
over an area of 193.39 sq. Km on the upland of North-Eastern
Ghat of the biotic region, Chandaka- Dampara sanctuary
is a treasure house of biodiversity. The park is known for the successful
conservation of elephants which is the principal species here. It is also
home to a number of threatened
wild animals and birds. Spread over such a big area at the
Chandaka forest, Khurda Uplands were designated as the Chandaka
Elephant Reserve in August 1982. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="bhitarkanika-wl.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Bhitarkanika National Park : The
Wonder in the Wild</h1>
<p class="card-text">
On the coast of the Bay of Bengal, between Paradip and
Chandipur, Bhitarkanika is the nesting site of a million olive Ridley
turtles that come ashore to the 35 km. the long stretch of beach at
Gahirmatha Marine Wildlife Sanctuary, a World Heritage site.
Bhitarkanika is formed from two Oriya words-Bhitar
meaning interior and Kanika meaning that which is extraordinarily
beautiful. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="baisipalli-wl.jpg" alt="Maldives"
/>
<div class="card-content">
151
 <h1 class="card-header">Baisipalli Wildlife
Sanctuary</h1>
<p class="card-text">
Baisipalli Wildlife Sanctuary was made on 6 May 1981
and is situated in Nayagrh, Odisha, India, nearby the Satkosia Gorge
Wildlife Sanctuary. It is 168.35 square kilometers(41,600 sections of
land) of sanctuary land. Baisipalli Sanctuary has been notified
vide Notification No. 8F(W) 25335ft. 16.05.1981 of FE
& AH Department, Government of Odisha. The state of the boundary of
the Sanctuary is 84° 35.4' E to 84° 48.5' E Longitude and 20° 23.8' N to
20° 31.3' N Latitude with an altitudinal
range from 40mt. to 843 mt. from MSL. The Wildlife
Sanctuary makes a co-end with the Baisipalli Reserve Forest. Situated in
the close proximity of the Satkosia Gorge Sanctuary, the Baisipalli
Wildlife Sanctuary is lying in its
south. The sanctuary's pride rests in the Tigers, Elephants,
Mouse Deer, the state animal Sambar as well as a plethora of other wild
species that inhabit the sanctuary. The sanctuary is also the home of
variegated species of domestic
as well as migratory birds whose dulcet chirps and
colored plumes augment the charm of the surroundings </p>

</div>
</div>
</div>

</div>
</body>

</html>

Wild.css
@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
152
 padding: 0;
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

body {
background-color: #eee;
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.grid h1 {
text-align: center;
border-style: outset;
border-color: #3363ff;
font-family: 'Times New Roman', Times, serif;
border-width: 10px;
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
153
 box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.hm {
font-size: 2rem;
text-decoration: none;
}

.head {
padding-top: 20px;
text-align: center;
padding-bottom: 20px;
border-color: #3363ff;
border-style: inset;
border-width: 5px;
margin-bottom: 5px;
}

.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
}

.card-content {
padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
154
 color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
155
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}
}

balasore.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>webIQ</title>

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

<link rel="stylesheet" href="">
</head>

<body>
<div class="grid">
<a href="discover.php"><button>Go Back &larr;</button></a>
<h1 class="head">
"Heritage of Odisha"
</h1>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/padmapur.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Padmapur Odisha</h1>
<p class="card-text">
156
 Padmapur is one of the popular villages in the district of
Rayagada of the state Odisha, mainly
because of the numerous temples located in the town.
There is a hillock on the northern side of
the village that embraces the surrounding of this place
and lures a larger chunk of tourists. On
this hillock, there are temples like Mallikeswar,
Neelkantheshwar, Pudugeswar, and Dhabaleswar
that traces their history from the ancient times. These
temples are dedicated to Lord Shiva.
Making the place an important heritage centre in Odisha,
a 7th-century inscription was found in
Neelkantheshwar Temple which stated that the nearly
located Jagdamba Hills was once the home of
a monastery of the well-known Buddhist logician-
philosopher named Dharmakirti.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/muchalinda.jpg"
alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">Muchalinda Odisha</h1>
<p class="card-text">
Traces its history from Gupta Period, Muchalinda is a
Buddha Monastery in Odisha which is
located near the confluence of the Magar and Ang Rivers
in Gaisilat Block, Padmapur Subdivision
in Bargarh district. The statue of Muchalinda was first
discovered by an art historian, Charles
Fabri in 1961. In 1978, an excavation project was carried
out here by P.G. Department of
History, Sambalpur University. However, it is said that
this popular heritage site in Odisha was
once had a multi-storied structure. But due to brick
robbing, most of the foundation plinths
157
 have been destroyed. The excavation also discovered the
traces of walls of the chambers and
cells of the Bhikshus, chaitya hall, and mendicants. Along
with that, two Buddha idols were also
recovered on a small stone called mandapa. These idols
include the statues of a Muchalinda
Buddha and Buddha at Sarnath while giving the homily.
As per Buddhist scripture, Vinaya Pitaka,
the serpent King Muchalinda protected Lord Buddha
during the second of his enlightenment
programme. Muchalinda created an umbrella from his
hood to protect Buddha from the rain and
storm. Thus, the locals worship his statue call him as
Naga-Muni.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/kuruma.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Kuruma Odisha</h1>
<p class="card-text">
Some 8 km southeast of Konark Sun Temple, there is
located a small village in Puri, Kuruma.
Kuruma is a popular Buddhist heritage site in Odisha and
is known for proffering a great insight
to the Buddhism culture of the state. Believed to be built
in 9th-10th centuries, the place was
first located by Shri Barajabandhu Das who was a school
teacher. Between the time period of 1971
and 1975, an excavation project was carried out at
Kuruma by Odisha State Archaeological
department. Before this time period, a stone slab was
found here that contained an idol of Lord

158
 Buddha in bhumisparsha mudra. Apart from this, a couple
of more statues were recovered near the
pond. The finding of these statues led to the excavation
period. It is said that once there
existed a Buddhist Monastery which was also referred by
Hiuen Tsang.

This Buddhist monastery has twelve blocks with a height

of 34 m each including three blocks in
each cardinal direction. It also has Buddhist monks cells
and a shrine chamber and a large
courtyard with a shape of ‘Swastik’. Though the place is
abandoned now, it is still worshipped
by locals. At present, the site has a small temple with
three Buddhist idols. The first is
Buddha seating in a bhumisparsha mudra (crossed legs)
with the left hand on the knee. Whereas,
the other two are Padmapani Avalokiteshvara and
Revanata that are places near the water tank.
The locals of Kuruma worship all the three images as
‘Yamadharma’.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/langudi.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Langudi Odisha</h1>
<p class="card-text">
Langudi is a Buddhist heritage site in Odisha located on
the plains of Mahanadi Delta in the
district of Jajpur. This long stretch of hills is lacking with
vegetation but is clustered with
several Khondalite rocks. The hill houses a series of rock-
cut Buddhist stupas and few Buddhist

159
 shrines dated back from early medieval that make it one
of the top tourist attractions of the
district. The excavation carried out here uncover two
panels of rock-cut caves and Dhyani
Buddhas. The first panel dates back from 1st-4th
centuries that consists of the series of 34
stupas. Of these, the centre one in the series is the largest
stupa flanked by Vidyadharas that
tells the specimen of the stunning craftsmanship.
However, there is one more feature of the
series that include a floral tribute to stupas. Coming on to
the second panel, which traces its
history from 8th-10th centuries, it includes stupas,
Buddhas in dhyani mudras, goddess Tara -
the seafaring goddess, Avalokitesvaras - deities of
Vajrayana pantheon, Prajnaparamita - the
holy mother of all the celestial Dhyani Buddhas.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/pushpagiri.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Pushpagiri Odisha</h1>
<p class="card-text">
Probably the most famous Buddhist viharas (monasteries)
in Odisha, Pushpagiri is perched atop of
Languri Hills in the Jajpur district. Built in the 3rd
century CE, the place ranks as one of the
important institution of higher learning in ancient India
that makes it a popular heritage site
in the country. In 639 CE, Xuanzang (Hiuen Tsang), a
renowned Chinese traveller, visited
Pushpagiri along with Vikramshila, Takshashila, and
Nalanda. That was the time when he named

160
 this place as Pushpagiri Vihara. The Buddhist centre of
Pushpagiri also has its description in
medieval Tibetan texts. The complex of Pushpagiri
sprawls over three hilltops (Lalitgiri,
Ratnagiri, and Udayagiri) that include various stupas,
temples, monasteries, and sculptures
which boasts architecture design from the Gupta Period.
However, till 1995, when a professor of
local college first visited this place, these ruins were
undiscovered. After that, an excavation
program was carried out here in 1996 under Odisha
Institute of Maritime and South East Asian
Studies. This program ran from the period of 1996 to
2006 on 143 acres of land. Throughout this
whole-time span, numerous ruins were recovered from
this place that includes a piece of Brahmi
inscription identified as Pushpagiri, a large stupa,
artefacts, and more. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/dhauli.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Dhauli Odisha</h1>
<p class="card-text">
Blessed with serenity and brimming in history and
culture, Dhauli is home to the famous rock
edicts of Ashoka. It is said that Dhauli is the place where
the battle of Kalinga was fought.
The Mauryan emperor Ashoka conquered this battle in
265 BC. Despite his victory, the horrors and
the misery of this battle filled him with remorse. As a
result of this, his ambition changed
from military conquest (Dig-Vijaya) to spiritual conquest
(Dharma-Vijaya). With that, Ashoka

161
 repudiated the path of violence in favour of embracing
Buddhism in Dhauli which was then became
an important Buddhist centre. He then issued his new
adages in rock edicts that were installed
in different parts around his empire. And one of these
edicts lies here at the base of the hill.
Ashoka also built various pillars, chaityas, and stupas
here at Dhauli. Apart from this, Peace
Pagoda (Vishwa Shanti Stupa) is another attraction of
Dhauli that is located on the top of the
hill. In 1972, it was built by Japan Buddha Sangha and
Kalinga Nippon Buddha Sangha which is an
Indo-Japanese collaboration. The beautiful white double
storey structure comfortably standing on
a platform in the form of a large dome with lotus petals as
its crown. The top of this stupa is
covered with five chhatris (umbrellas) which represents
the five aspects of Buddhism.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/khiching.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Khiching Odisha</h1>
<p class="card-text">
Comes under the district of Mayurbhanj, Khiching is a
historical village that was once the
capital of Bhanja rules. The star attraction of this
beautiful place is a Maa Kichakeswari
Temple which dates back to the 7th or 8th century.
Kichakeswari Temple is made up of chlorite
slabs and boasts an impressive Kalinga architectural
design. However, the temple is believed to

162
 be the first temple of Odisha and because of this Khiching
is known as the town with a rich
heritage history. But, the architectural ruins recovered
from this place said that the temple
traces its history from the 8th to 12th century. It is also
said that, once the town was a house
of eight Shiva temples out of which seven can still be
traced. At present, there are just three
ancient temples left that worship Chandrasekhar,
Kutaitundi, and Kichakeswari. In order to lure
more tourists to the village, a museum has been also
installed that boasts life-size images of
numerous deities like Ganesha, Durga, Tara, Parvati,
Parsvanatha, Vaishnavi, Avalokitesvara,
Kartikeya, Dhyani Buddha, Uma-Maheswara, Nandi, and
more. On display, there are also sculpted
parts of various ancient temples to promote the heritage
tourism in the region. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/udayagiri.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Udayagiri Odisha</h1>
<p class="card-text">
Udayagiri is the largest Buddhist centre in Odisha located
in the foothills of Jajpur district.
This heritage tourist site in Odisha forms the very famous
‘Diamond Triangle’ of Odisha along
with Ratnagiri and Lalitgiri. Udayagiri along with its
adjacent hill Khandagiri houses a group
of ancient rock-cut caves that were once the shelters of
earliest groups of Jains. In total,
there are 18 caves in Udayagiri and 15 in Khandagiri and
are known by the name Udayagiri and

163
 Khandagiri Caves. However, in the ancient inscriptions,
these caves are called as Lena and the
most famous of the group lies here in Udayagiri which is
Rani Gumpha. Whereas, the other famous
caves include Ananta Gumpha, Hathi Gumpha, Jaya
Vijaya Gumpha, Ganesha Gumpha, and Bagh Gumpha.

Ancient monasteries and stupas are other prime

attractions of the place. The monasteries in
Udayagiri trace their history in between 7th to 12th
centuries. Since 1958, the place has
witnessed numerous excavation programs carried out by
Archaeological Survey of India. In all
those excavations, various ruins have been recovered that
include antiquities, 23 ft stupa,
images of Lord Buddha in Dhyani posture, monasteries,
and the statues of various deities like
Tara, Manjushri, Avalokiteshvara, Lokeswara,
Jatamukuta, and more. At present, the complex of
Udayagiri proffers a stunning sight of a large monastery.
Along with that, the hidden treasure
of more such enthralling ruins is expected to be buried
under the land which is still
unexcavated. These lands boast a mystery to all the art
lovers and archaeologists.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/lalitgiri.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Lalitgiri Odisha</h1>
<p class="card-text">
Some 83 km east of Bhubaneswar, there is located an
ancient Buddhist complex amidst the

164
 picturesque Birupa-Chitrotpala valley in the district of
Cuttack, Odisha. This Buddhist heritage
site in Odisha dates back to 1st century AD. Lalitgiri is an
important part of Diamond Triangle
of Odisha which includes three major ancient Buddhist
sites; Ratnagiri and Udayagiri being the
other two. In 1937, the central government gave this place
the status of a protected monument.
The place constitutes stupas, monasteries, and Buddha
images as its main attractions. It is said
that Lalitgiri was a prime place of Tantric Buddhism.
Some excavations were carried out at
Lalitgiri in 1977 by Utkal University. However, the major
excavation was carried out by
Bhubaneswar Circle of the Archaeological Survey of
India between 1985 and 1991 to find the
Pushpagiri. Pushpagiri was mentioned in the writings of
the Chinese traveller Xuanzang. It was
this excavation which officially declared Lalitgiri an
ancient Buddhist site in Odisha.

Moreover, this excavation also helped to discover various

important ruins. From this excavation,
a large stupa was recovered with two caskets with some
relics. As per the archaeological
experts, these are Buddha’s relics. Besides, remnants of
four monasteries were also discovered
in this excavation process. Facing east, the first was the
largest monastery, sprawls in the
area of 390 sq ft, that dates back to 10th-11th century.
The second and third ones face north
and south-east. Whereas, the fourth monastery include
many large Buddha heads in the sanctum
sanctorum. Moreover, the idols of Buddha in different
postures along with a few prestigious
relics were also discovered. Another talk of this
enthralling place is a museum where sculptures
of Buddhas, stone statues, images of various deities and
relic caskets are put on a display.
</p>
165
 </div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="himg/balasore.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Balasore Odisha</h1>
<p class="card-text">
Presenting a glorious coastal attraction in Odisha,
Balasore is a beach city located in the
northernmost part of state Odisha. In October 1828, a
separate district of Balasore was created.
In the ancient times, the city served as ruling kingdom of
Kalinga, Toshal, and Utkal kingdoms.
Just to let you know that the city of Balasore is amongst
the top literate cities in Odisha with
over 100 education centres. The locals here mainly
depends on the agriculture, fishing, and
tourism. Primarily, the city is famous for the mysterious
Chandipur Beach and secondary for its
heritage temples. Apart from this, this historical city also
includes historical palaces, tombs,
hills and beaches as their main attractions. Langula
Narasimha Dev Temple, Gopinatha Temple, and
Biranchinarayan Temple are some of the well-known
attraction of this place.

Established by the British government in 1642, Balasore

remains an important trading port with
British, Dutch, and French till the 18th century. As a
result of this, ruins of some Dutch tombs
and remnants of old canals can still be seen at this place.
Being a mixed cultural heritage city
in Odisha, the population of Balasore include both
Marwaris and Bengali locals. Besides its
various attractions, the city is also famous for its unique
delicacies, especially a juicy sweet
166
 call rasgullas and also Chhena poda. There are also
various shops that sell enthralling items
made up of seashells and beads. Moreover, the place is
also famous for its locally made fabrics
especially kotki cotton and sambalpuri sarees.
</p>

</div>
</div>
</div>
</div>
</body>

</html>

heritage .css

@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

body {
background-image: radial-gradient(circle, rgb(82, 237, 152), rgb(226,
226, 19), rgb(83, 224, 207));
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

167
.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.grid h1 {
text-align: center;
border-style: outset;
border-color: #3363ff;
font-family: 'Times New Roman', Times, serif;
border-width: 10px;
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
168
}

.card-content {
padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}
169
.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}

.head {
font-size: 5rem;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-style: inset;
border-width: 30px;
border-color: #3363ff;
padding-bottom: 10px;
margin-bottom: 10px;
background-image: radial-gradient(circle, red, yellow, green);
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}}

temple.php

<!DOCTYPE html>
<html lang="en">

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

170
 <meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>webIQ</title>

<link rel="stylesheet" href="wild.css" />

</head>

<body>
<div class="grid">
<a href="discover.php"><button>Go Back &larr;</button></a>

<h1>Temples of Odisha</h1>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/puri-jagannath-temple-
tm.jpg" alt="Rome" />
<div class="card-content">
<h1 class="card-header">Shree Mandir(Lord Jagannath
Temple)</h1>
<p class="card-text">
Shree Mandir(Lord Jagannath Temple) The world-famous
Jagannath temple is known in many names like Puri Dham, Srikshetra,
Sri Mandira, Bada Deula, Sankha Kshetra, Nilachala Dham,
Purusottama Khestra, Bhauma Vaikuntha, Narashima-Kshetra etc. The
temple
of Jagannatha is one of the tallest monuments in the
entire. sub-continent of India and its height is about 214 feet from the
ground level. The temple is bounded by two compound walls, the outer
one known as Meghanada Prachira
& the inner one known as Kurma Prachira. The present
temple was built in the 12th century AD. The temple structure is full of
excellent carvings and lovely pieces of sculpture and is a fine specimen
of Kalinga style of architecture.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
171
 <img class="card-img" src="./img/sun-temple-konark-tm.jpg"
alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">Sun Temple</h1>
<p class="card-text">
Konark Sun Temple is situated in the eastern state of
Odisha, India and is one of the eminent tourist attractions. Konark
houses a massive temple dedicated to the Sun God. The word Konark is
a combination of two words Kona and Arka. Kona means Corner
and Arka means Sun, so when combines it becomes Sun
of the Corner. Konark Sun Temple is situated in the northeastern corner
of Puri and is dedicated to Sun God. Konark is also known as Arka
kshetra.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/wooden-sun-temple-
tm.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Wooden Sun Temple</h1>
<p class="card-text">
Famously called as the wooden Konark, this wooden
masterpiece of temple architecture is dedicated to Biranchi Narayan –
the Sun god. The temple was built by the Ghumusar King Srikar Bhanja
after he ascended the throne in 1790. The temple is built like
a chariot drawn by seven horses. The exquisite wood
carvings and paintings on the walls are the high points of the temple.
One peculiar aspect of the temple is that it's West facing unlike other sun
temples which are east facing.
The temple is designed in such a way that the last ray of
the sun falls on the temple. </p>

</div>
</div>
</div>
<div class="grid-item">
172
 <div class="card">
<img class="card-img" src="./img/lokanath-tm.jpg"
alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">Sri Lokanath Mandir</h1>
<p class="card-text">
Sri Lokanath temple is one of the most important Shaiva
shrines of Odisha. The temple is situated near the Jagannath temple of
Puri. As per local people this temple was established by Lord
Ramachandra. From the architectural point of view, the temple
is not so important but from the religious point of view, it
occupies an important position in the cultural history of Odisha. The
legend says that Lord Rama on his way to Lanka for searching Sita
reached Puri. At that time Sabaras(a
native of the village) presented him a Lau or
Lauka(Pumpkin) looking like a Siva Linga, Lord Rama installed that as
the replica of Siva Linga at that place and prayed Siva to fulfill his
desire. From that day this Siva Linga was
called Laukanatha. It is believed that the word Lokanatha
is a later innovation from the original word Laukanatha. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/alarnath-tm.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Alarnath Temple</h1>
<p class="card-text">
Located in Brahmagiri, The Alarnath Temple is a revered
shrine dedicated to Lord Vishnu or Lord Alaranth as he is known locally.
The present temple is a 14th-century shrine attributed to Rajputs from
Alwar. The Rajputs settled in Western Odisha between
1300 AD & 1400 AD. The name Alarnath is derived from
Alwarnath. According to the legend, Lord Alarnath is the form of
Vishnu- carved out of black stone-as prescribed by the Lord himself to
Brahma. It is believed that those who

173
 cannot worship Lord Jagannath during his stay in the sick
chamber can get the blessings of the deity if they visit the Alarnath
temple. This particular legend has its roots in Chaitanya Mahaprabhu.
Chaitanya claimed that he visualized
the appearance of Lord Jagannath in Lord Alarnath and
spent a long period of worshiping the deity here.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/sakhigopal-puri-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Sakhigopal Temple</h1>
<p class="card-text">
One of the sacred tourist destinations of Odisha,
Sakhigopal is a village of historical importance which is situated 19 km.
north of Puri. The name Sakhi Gopal literally means witness
Gopal(Srikrishna). The temple of Sakhigopal is 60 ft height & the image
of Shri Krishna and Radha is 5 ft & 4ft height
respectively. It is surrounded by Sasanas or Brahmins settlements and is
the center of trade of coconuts. Anla Navamee is the biggest festival of
the center, which attracts a large
crowd every year to witness Radha Pada(feet of Goddess
Radha).

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/ramachandi-puri-tm.jpg"
alt="Grand Canyon" />
<div class="card-content">
174
 <h1 class="card-header">Ramachandi Temple</h1>
<p class="card-text">
Ramachandi Temple is on a beautiful spot on the banks of
the Kusabhadra River where it flows into the Bay of Bengal. It is only 5
km away from Konark in the Puri District of Odisha. Ramachandi is
popularly believed the presiding deity of Konark and the
most benevolent Chandi known. It is certainly more
ancient than the Sun temple at Konark. From the architectural point of
view, the temple of Ramachandi is not important but from the religious
point of view, it is one of the famous
Shakti pithas of Puri. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/parashurameswar-tm.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Parashurameswar Temple</h1>
<p class="card-text">
Dedicated to Lord Shiva, Parsurameswar temple is one of
the ancient Hindu temples of Bhubaneswar city in Odisha. It is believed
that the temple was constructed in around 650 AD, in Nagara style.
Tourists from all parts of the globe come to unravel the
mystery behind the temple. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/rajarani-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Rajarani Temple</h1>
<p class="card-text">
Rajarani Temple in Bhubaneswar boasts of distinctive
charm. It was constructed in the 11th century from reddish and yellow
175
sandstone called Rajarani in the local dialect. Also, the shrine is famous
amongst the natives as the Love Temple because of the
erotic carvings of couples and women in the sanctum
sanctorum. The temple was initially known as Indreswara temple
devoted to the worship of Lord Shiva. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/lingaraj-tm.jpg" alt="Grand
Canyon" />
<div class="card-content">
<h1 class="card-header">Lingaraj Temple</h1>
<p class="card-text">
The Lingaraj Temple is an ancient temple situated in the
city of Bhubaneswar and is the largest one situated in the city. Dedicated
to Lord Shiva as the name suggests, the temple was built in the 7th
century by King Jajati Keshari. It is highly revered
because of the fact that the Linga here, which is the
phallic form of Lord Shiva, is believed to have appeared naturally. It
rises to a massive height of 8 inches above the floor level and is about 8
feet in diameter as well.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/mukteswar-tm.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Mukteswar Temple</h1>
<p class="card-text">
Built-in the 10th century, Mukteswar temple belongs to
the Somavamshi Dynasty and is believed to be sculpted by Yayati-I.
Mukteshvara Temple also emerged as a popular religious tourist
attraction in Odisha for its architecture which symbolizes the innovation
176
 in Kalinga style of architecture. The temple is dedicated
to Lord Shiva.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/vaital-tm.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Vaital Temple</h1>
<p class="card-text">
Vaital Deula or Baitala Deuḷa is an ancient Hindu temple
situated on the banks of Bindu Sarovara in Bhubaneswar, Odisha.
Locally known as Tini Mundia Mandira, it is one of the oldest temples in
Bhubaneswar. The Vaital Temple is an 8th century temple of
the typical Khakara style of Kalinga School of
architecture. This is one of the rare temples in India that was used as a
shrine devoted to the tantric cult. The temple is dedicated to Goddess
Chamundi, the tantric form of Goddess
Durga.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/anantabasudeva-tm.jpg"
alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">Ananta Basudeva Temple</h1>
<p class="card-text">
Constructed in the 13th century, this Ananta Vasudeva
temple Bhubaneswar is a perfect platform for Lord Krishna, who is a
well-known avatar of Lord Vishnu. A perfect dedicated temple to Lord
Krishna, Ananta Vasudeva temple is situated in Bhubaneshwar,

177
 in India. It was constructed in the 13th century, which
was built by Queen Chandrika. She was the queen of the Eastern Ganga
dynasty and was the first person to prompt and construct this temple.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/harishankar-tm.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Harishankar Temple</h1>
<p class="card-text">
Sri Harishankar Devasthana, is a temple on the slopes of
Gandhamardhan hills, Odisha in India. It is popular for its scenes of
nature and connection to two Hindu lords, Vishnu and Shiva. A
perennial stream bursting into droplets rushes on its hard granite
bed to form cascades at different stages. As a cool resort
in the lap of nature, Harishankar is an ideal place for the heat of the
summer season. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/huma-tm.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Huma's Leaning Temple</h1>
<p class="card-text">
The leaning temple of Huma is located on the banks of
river Mahanadi, near a village called Sambalpur in Odisha. The temple is
dedicated to Lord Shiva and is one of the unique attractions of the state.
There are no facts which can prove it and nor it
is a technical construction flaw as Odisha has
innumerable temples built during Raja Balaram Deb's era and he was
known to build enormous temples. </p>
178
 </div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/nrusingnath-tm.jpg"
alt="Grand Canyon" />
<div class="card-content">
<h1 class="card-header">Nrusingnath Temple</h1>
<p class="card-text">
The Vidala-Nrusinghha Temple stands amidst the verdant
beauty of the picturesque Gandhamardan hills. Nrusinghanath is a
popular and attractive pilgrim point. Coupled with a series of beautiful
waterfalls and some sculptures, its location offers an air
of serenity and visual delight, making the trip worthwhile.
It is only 165 km away from Sambalpur. The present temple, situated at
the source of the Papaharini stream, is a 14th century structure built on a
more very old site.
The four pillars within the Jagmohana suggest that the
earlier temple was built in the 9th century. The beautiful doorframes
have been dated to the 11th century. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/hirapur-tm.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Yogini Temples(Hirapur, Ranipur
Jhariat)</h1>
<p class="card-text">
Chausathi Yogini Temple is situated at Hirapur, near
Bhubaneswar. What makes this temple quite unique is that it's the first
64 Yogini temple in India & from here it spread to other states. And, its
the smallest temple among the list of four major surviving
64 Yogini temples in India, among which two are in
Odisha, at Ranipur-Jharial(9th cent), Bolangir. The rest two are at
179
Khajuraho(9th cent) & Jabalpur(10th cent) in Madhya Pradesh. The
Ranipur-Jharial temple was built with coarse-grained
inferior sandstone, which is a bit eroded. Now the temple
is said to have been constructed somewhere around 900 AD, as is
suggested by the Somesvara shrine at the foot of the hill alongside the
tank.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/pataleswar-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Pataleswar Temple</h1>
<p class="card-text">
Budhikomna houses the famous temple of Pataleswar
made of bricks in Pancharatha style unique in the state. A connoisseur of
art and architecture finds immense pleasure in observing the different
facets of this place. It is also a popular pilgrim center
in the locality, but due to lack of minimum infrastructure
facility tourists as well as pilgrims suffer a lot. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/samaleswari-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Samaleswari Temple</h1>
<p class="card-text">
Maa Samaleswari, the presiding deity of Sambalpur, is a
strong religious force in the western part of Odisha and Chhattisgarh
state of India. On the bank of the river Mahanadi, the mother goddess
Samaleswari is worshipped from ancient times as Jagatjanani,

180
 Adishakti, Mahalaxmi and Mahasaraswati. The region in
which the temple is situated has a rich cultural heritage. Sambalpur
region is popularly known as Hirakhanda from ancient times.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/ladubaba-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Ladubaba Temple</h1>
<p class="card-text">
Ladu Baba temple was built during the 13th Century AD.
Formerly, the temple was known as Kainchhi Temple. Ladukeswara or
Ladu Baba temple is one of the well-known examples of syncretism of
Lord Vishnu and Lord Shiva in Nayagarh hills. The temple is located
30 m north of Chitrakarini temple and 70 m south of
Mohini temple and it faces towards the east. The Sanctum of the temple
is devoid of any deity. However, the sculptural ornamentation on the
exteriors suggests that the temple
was originally dedicated to Lord Shiva and here Lord is
worshiped as Ladukeswara. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/raghunathjew-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Raghunathjew Temple</h1>
<p class="card-text">
Raghunatha temple is a famous and old temple of
Odagaon, which is 26 km far from Nayagarh. It is one of the famous
temples in Odisha dedicated to Lord Ramachandra. This temple has
beautiful wooden idols of Sri Raghunath, Sita and Laxman enshrined in
it.
181
 The Kalash of the temple is made of pure gold. A popular
legend associated with the temple states that famed poet 17th century,
Kavisamrat Upendra Bhanja, had composed his magnum opus-
Baidehisha Vilas, here at the feet of Sri
Raghunath.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/bhagabati-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Bhagabati Temple</h1>
<p class="card-text">
Goddess Bhagabati, the presiding deity of the place
Banpur has earned celebrity as a center of religious activities.Once it
was the Capital of Sailodhvaba dynasty, responsible for the construction
of the early group of temples at Bhubaneswar. The large
number of Buddhist images discovered at Banpur relate
the place to the Vajrayana cult of Buddhism. The temple of Daksha-
Prajapati is a fine specimen of the extraordinary artistic excellence of
Odisha art.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/gupteswar-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Gupteswar Temple</h1>
<p class="card-text">
Maintaining its authenticity as an unexplored shrine in a
cave is the Gupteswar Temple of Odisha. Settled in the Koraput District,
it is a famous tourist attraction due to the presence of a huge Shiva
Lingam which increases in size as per local belief.

182
 It is located around 55 km away from Jeypore and is
renowned as a popular pilgrimage site in Odisha.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/neelamadhava-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Nilamadhaba Temple</h1>
<p class="card-text">
It is an ancient and popular Lord Vishnu temple located
nearby the banks of River Mahanadi. The temple's overall complex and
structure is quite similar to the famous Lord Jagannath temple. This
temple is a miniature form of the Sri Jagannath Temple at
Puri and observes similar rites rituals. One can also find
amazing brass and bell metal crafts here, which are lovingly carried by
many visitors as souvenirs. A permanent flow of holy water flows from
the feet of Lord Nilamadhaba.
Lord Siddheswar is also a highlight of this place. Kantilo
is one of the most popular picnic spots in Odisha.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/baladevjew-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Baladevjew Temple</h1>
<p class="card-text">
Baladev Jew Temple is situated in Ichhapur(Tulasi
Kshetra), Kendrapara, Odisha. Baladevjew Temple is a very famous
temple of Odisha and Balarama is its main divinity. Along with Lord
Balarama, Jagannath and Subhadra are also worshiped in the Ratna
Sinhasan

183
 in the main temple. The temple was built in 1761 AD
during the Maratha rule in Odisha. The then king of Kanauja, Raja
Gopal Sandha and Zamindar of Chhedara Killah, and Srinivas Narendra
Mahapatra constructed the temple.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/chhatia-tm.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Chhatia Bata</h1>
<p class="card-text">
Chhatia Bata is one of the famous Hindu Temple of
Odisha situated at Chhatia in Jajpur district of Odisha. The deity of this
temple is Lord Jagannath, Balabhadra and Subhadra. The main attraction
of this Temple is the old Banyan tree which is known as
Bata in Odia Language. So the name of this temple is
Chhatia Bata due to this old Banyan Tree which is present inside the
temple boundary and beside the main temple of Chhatia Bata.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/chandi-tm.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Cuttack Chandi Temple</h1>
<p class="card-text">
Dedicated to Goddess Bhuvaneshwari, fourth among the
Ten Maha Vidyas, Cuttack Chandi Temple is a remarkable Hindu shrine.
It rests on the banks of the River Mahanadi and has an interesting tale
associated with it. Chandi Temple is popular for the major
festivals of Kali Puja and Durga Puja. The idol of Maa
Katak Chandi is placed at the center of the temple. Goddess Chandi has
four hands and they are known as Pasa, Ankusha, Abhaya and Bara.
184
 </div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/dhabaleswar-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Dhabaleswar Temple</h1>
<p class="card-text">
The temple is located on an island on the river Mahanadi
27 KM from Cuttack, the exotic surrounding makes this temple special.
The foot over bridge like Laxman Jhula and Ram Jhula in Rishikesh
over the river Mahanadi is an added attraction. The origins
of the temple are said to be around 10th or 11th century
AD. The present-day temple was constructed by King Bir Kishore of
Khurda around 1232 AD- it's said that during a hunting expedition the
king discovered the temple in a dilapidated
state and ordered for its renovation and allotted land for
the temple <button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/bhattarika-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Bhattarika Temple</h1>
<p class="card-text">
Bhattarika Temple is a major attraction for the tourists
and is dedicated to goddess Bhattarika, who is believed to be an
incarnation of Shakti, the shrine is situated on the banks of the River
Mahanadi. Bhattarika Temple is the shrine is situated on
the banks of the River Mahanadi.
</p>

185
 </div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/kapilash-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Kapilash Temple</h1>
<p class="card-text">
Kapilash Temple, a popular pilgrimage site located in the
northeastern part of Dhenkanal town of Odisha. As per the Kapilash
Temple Inscription, King Narsinghdeva-I of the Ganga dynasty was the
main personality behind the construction of this temple.
It was built in 1246 AD for Sri Chandrasekhara and is
believed to be older than Chandrasekhar Temple.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/taratarini-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Taratarini Temple</h1>
<p class="card-text">
Situated 30 Km away from the Berhampur city, Ganjam
district, this temple is recognized to be one of the four major Shakti pitha
according to mythological texts of Satya Yuga. The 6000 years of
historical connections and also its mention in the Puranas
make this temple an important pilgrim spot.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">

186
 <img class="card-img" src="./img/kichakeswari-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Kichakeswari Temple</h1>
<p class="card-text">
The ancient Kichakeswari Temple is located around
25km away from Karanjia, in the Mayurbhanj district of Odisha.
Located near the confluence of the rivers Khairibandhana and
Kantakhairi, the temple is one of the unique attractions of the region.
The ancient
Kichakeswari Temple is located around 25km away from
Karanjia, in the Mayurbhanj district of Odisha. Located near the
confluence of the rivers Khairibandhana and Kantakhairi, the temple is
one of the unique attractions of the region.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/khirachora-gopinath-
tm.jpg" alt="Rome" />
<div class="card-content">
<h1 class="card-header">Khirachora Gopinath
Temple</h1>
<p class="card-text">
It is famous as the Vaishnav shrine. Also, know as
Remuna Gupta Vrindaban. It is surrounded by another famous
Khirachora Gopinatha Temple that is situated in Remuna. The name
Remuna is resulting from the word Ramaniya which means very good
looking.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/akhandalamani-tm.jpg"
alt="Rome" />
<div class="card-content">
187
 <h1 class="card-header">Akhandalamani Temple</h1>
<p class="card-text">
On the bank of river Baitarani, Bhadrak district, the
Akhandalamani Temple is the abode of Lord Shiva. As the history runs,
king Niladri Samara Singha Mohapatra started worshiping the God
Akhandalamani some 350 years ago, when the black glazed granite
stone was found underground and the king dreamt of the
god. However, the religious and historical significance with which the
place is invested, constitute it to be a center of special interest in the
tourism of Bhadrak.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/panchalingeswar-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Panchalingeswar Temple</h1>
<p class="card-text">
Perched atop of a hillock in Nilagari Hill in the Balasore
district, Odisha, Panchalingeswar Temple is a Lord Shiva's temple which
is named after the five lingas of Shiva that are installed inside this
shrine. Panchalingeswar Saiva pitha is situated on
a hillock with perennial streams falling on five natural
Lingas. Its natural beauty attracts nature lovers and visitors. On reaching
the top of the hillock, one has to bend down in order to look for the
lingas inside a pool created
by the waterfall. These lingas are continuously washed by
the water of a perennial stream that flows over them.
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/sarala-tm.jpg" alt="Rome"
/>
<div class="card-content">
<h1 class="card-header">Maa Sarala Temple</h1>
188
 <p class="card-text">
The Sarala Temple is a Hindu temple in the district of
Jagatsinghpur, Odisha, India. Believed as a synthesis of the divine figure
of Durga and Saraswati, the culture of Sarala is an amalgamation of
three principal Hindu cults namely Vedic, Tantrik and
Vaishnavite. It is one of the eight most famous Shakta
shrines of Odisha.

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="./img/charchika-tm.jpg"
alt="Rome" />
<div class="card-content">
<h1 class="card-header">Charchika Temple</h1>
<p class="card-text">
Charchika Temple is a 19th century old temple situated in
the Banki town of Cuttack district in Odisha. Goddess Chamunda is
worshiped in the temple. She is an eight-armed goddess, who is a
manifestation of Maa Devi Durga. This temple is situated on the
top of a hillock whose name is Ruchika Parvat on the bed
of the Renuka river.

</div>
</div>
</div>

</div>
</body>

</html>

189
Wild.css

@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

body {
background-color: #eee;
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.grid h1 {
text-align: center;
border-style: outset;
border-color: #3363ff;
font-family: 'Times New Roman', Times, serif;
border-width: 10px;
190
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.hm {
font-size: 2rem;
text-decoration: none;
}

.head {
padding-top: 20px;
text-align: center;
padding-bottom: 20px;
border-color: #3363ff;
border-style: inset;
border-width: 5px;
margin-bottom: 5px;
}

.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
}

.card-content {
191
 padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
192
 background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}
}

fest.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Festival</title>

<link rel="stylesheet" href="fest.css" />

</head>

<body>

<div class="grid">
<h1>Festival Of Odisha</h1>
<a href="discover.php"><button>Go Back &larr;</button></a>

193
 <div class="grid-item">
<div class="card">
<img class="card-img" src="bali-yatra-fs.jpg" alt="Rome" />
<div class="card-content">
<h1 class="card-header">Satakosia Gorge</h1>
<p class="card-text">
In the Hindu month of Kartik(October - November), the
city of Cuttack in Odisha celebrates a
renowned festival known as Bali Jatra. The name Bali
Jatra means ‘A Voyage to Bali’. This
popular festival of Odisha marks its beginning from the
day of the full moon and continues for
the next seven days at Gadagadia Ghat of the River
Mahanadi where they worship the Lord
Kartikeswar - the presiding deity of this festival.
Moreover, through this festival, the locals
also commemorate that day when sailors of Odisha first
crusade to distant lands of Java, Bali,
Borneo, Sri Lanka and Sumatra. To pay their homage,
regional people make the artificial
boat(made up of paper, barks of the banana tree and cork)
and float it in the water. Besides,
the festival also observes the tradition of lighting lamps in
the boat which is called Boita
Bandana. This boasts an amazing landscape of countless
boats lit with lamps.
</p>
<h1>How to reach</h1>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="budhithakurani-yatra-fs.jpg"
alt="File Not Found" />
<div class="card-content">
194
 <h1 class="card-header">Bali Yatra</h1>
<p class="card-text">
Finding its origin in the year 1962, Ushakothi wildlife
sanctuary offers a soulful experience to
wildlife lover “Badrama Wildlife Sanctuary”, which is
also known as “Ushakothi Sanctuary” is
situated at a distance of 37 Km. from the district
headquarters
of Sambalpur District towards Deogarh on National
Highway-6. The sanctuary comprises parts of
Badrama Reserve Forests, Ushakothi Reserve Forests,
Binjipali Reserve Forests and Additional
Kansar Reserve Forests. The Sanctuary is
characterized by the presence of Moist Sal Forests, Sal
dominated mixed deciduous Forests and
bamboo forests. The Sanctuary forms a significant part of
the Sambalpur Elephant Reserve.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chandan-yatra-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Chandan Yatra</h1>
<p class="card-text">
This festival takes place in the month of Vaisakha and
continues for 42 days. But, generally
speaking, and for the pilgrims and visitors, it is a Festival
of 21 days only. The first period
is known as Bahar Chandan or outer Chandan. During
this period, the representative images of
Rama, Krishna, Madanmohan, Laxmi and Biswadhatri at
taken in a procession to Narendra tank. Also

195
 images of Siva from 5 Shiva Temples known as Pancha
Pandavas accompany them in a Procession in
the Narendra tank, the images play in well-decorated
boats and are worshiped. The second period
of 21 days known as Bhitar Chandana is celebrated inside
the Temple.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chatar-jatra-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Chatar Jatra</h1>
<p class="card-text">
Chatar Jatra is a traditional festival celebrated by the
people of Kalahandi District, Odisha.
The festival is being celebrated during the Mahastami of
Durga puja festival; the ritual
practice of Khonds Nabakalevar is also performed during
the festival. To please Maa Manikeswari,
a tribal dance is performed, which is known as Ghumura
dance. Ghumura is a traditional dance and
a heritage of Kalahandi district, it is a dance performed
with a traditional instrument Ghumura
Veer Badya.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="chhau-festival-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Chhau Festival</h1>
196
 <p class="card-text">
The Chhau Festival is a significant festival for the people
of Odisha, which continues for three
successive days. The Festival is observed by the Bhuiyans
Tribe in numerous areas of Odisha,
particularly in Koraput, where the celebration is praised
with the most extreme intensity. The
celebration is basically appended to Mayurbhanj Chhau, a
noteworthy move type of Odisha. It
includes artists wearing covers called Chhau which
originate from the word Chhaya, signifies
shadow. Thus the dance form suggests playing with the
shadow. Performers wear vibrant costumes
and play mythical characters or historical characters.
Chhau is a vivacious type of martial
dance & dramatization prevalent in the Chotanagpur level
range of Eastern India. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="dhanu-yatra-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Dhanu Yatra</h1>
<p class="card-text">
Dhanu Yatra in the Bargarch district of western Odisha is
considered as the biggest open-air
theatre in Asia. Held either in the month of December or
January, the festival is organized to
celebrate the Independence and victory of the good over
the evil. With the central theme of the
festival based on the Krishna Leela and Mathura Vijay,
the enactment begins with the wedding of
King Kansa's sister Devaki with Basudev followed by his
accession to the throne, dethroning his
father Ugrasen and concludes with Kansa Badha at the
hands of nephew Lord Krishna. It is a
197
 visual delight as the entire episode of Mathura Vijay and
Krishna Leela is depicted frame by
frame.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="durga-puja-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Durga Puja</h1>
<p class="card-text">
Durga Puja is a popular festival in Odisha, is celebrated to
worship the Goddess of Power and
War, the Goddess Durga and to celebrate women's power.
The festival takes place in the month of
Aswin or Kartik i.e. September or October every year
according to the English calendar. During
this Hindu festival, devotees totally immerse themselves
in Durga puja festivity for ten days.
Among all cities, Cuttack celebrates the Durga Puja in a
major way.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="ekamra-utsav-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Ekamra Utsav
</h1>
<p class="card-text">

198
 Ekamra Utsav is celebrated every year in Bhubaneswar,
dedicating to Lord Shiva, it is a full
ten-days event. This festival in Odisha is celebrated at
Janata Maidan of Bhubaneswar city in
the first week of November every year. Ekamra Utsav is
an event focusing on multiple disciplines
thus aiming to boost Odisha's rich textile industry and
cultural heritage in the most colorful
way. </p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="ganesh-puja-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Ganesh Puja</h1>
<p class="card-text">
The 10-day festival that marks the beginning of the
festive season in Odisha celebrates the
birth of Lord Ganesha, the younger son of Lord Shiva and
Goddess Parvati. Ganesh Puja was
celebrated with religious fervor across Odisha. This
festival is celebrated with religious
fervor across the state. Mostly all educational institutions
were decked up for the celebration.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="hingula-yatra-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Balukhand Wildlife
Sanctuary</h1>
199
 <p class="card-text">
Worshiping of Shakti or Shiva has grown out of the mass
religious culture of the people under
the spell of Tantrism in the remote past. One such festival
is Hingula Yatra or Patua Yatra.
There is a popular belief among the local people that on
this day of Visuba Sankranti Goddess
Hingula appears and propitiation to Her removes all evil
forces. She is worshiped in the village
street on Her imaginary stride to the village. Offering to
Her includes spat new cloth,
Pana(sweet-water), butter lamp and green mangoes.

</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="holi-fs.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Chandaka Dampara Wildlife
Sanctuary</h1>
<p class="card-text">
Holi is often regarded as the festival of colors
predominantly played in Northern & Western
India. The festival is also known as Dola Yatra or Dola
Jatra falls on the full-moon day in the
month of Phalguna. On this day Odia calendar becomes
ready and it is worshiped on Dolabedi in
front of Dolagovinda.

Dola Purnima is a Hindu festival of paramount

importance and the deities inside the sanctum
sanctorum of Jagannath temple are decked up in gold
jewelry embellished with diamond and gems.
This ritual is popularly known as Raja Dhiraj Besa or
Suna Besa. </p>

200
 </div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="kalinga-mahotsav-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Kalinga Mahotsav</h1>
<p class="card-text">
Kalinga Mahotsav is the festival of Martial Dance is
celebrated to mark the major victory of
peace over war when Kalinga(part of Odisha) once
witnessed a battle during the reign of Ashoka.
The festival is a tribute to the martyrs of the Maurya
Dynasty which is celebrated by various
Martial Art Acts through dance and music. Kalinga
Mahotsav is one of the most famous festivals
of Odisha. It holds great religious significance for people.
The aim of this festival is to
encourage people to follow the path of peace and calm,
rather than fighting amongst themselves.
</p>

</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<img class="card-img" src="konark-dance-festival-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Konark Dance Festival</h1>
<p class="card-text">
Konark Dance Festival is a five-day celebration starting
from 1st December till 5th December.
During these five days, renowned dancers from all over
the country come to showcase their talent
at the Konark Natya Mandap. The main aim of organizing
this dance festival is to introduce the
201
 world with traditional Indian dance forms and its diverse
culture.

</p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="maghamela-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Maghamela</h1>
<p class="card-text">
It is a popular festival celebrated in Konark. On the 6th-
7th day of the bright half of the
month of Magha(January-February). The pilgrims
assemble on the night of 6th day at Chandrabhaga
beach, worship the local deities and take holy dips in the
beach before the sunrise. The holy
dip here and paying homage to the sun God on this day is
considered sacred. </p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="maha-shivaratri-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Maha Shivaratri</h1>
<p class="card-text">
Dedicated to Lord Shiva, Mahashiv Ratri is one of the
most important festivals of Hindus and
202
 celebrated with great enthusiasm in Odisha. Falling on the
14th day of Phalgun, Maha Shivratri
is an important festival of Odisha.

On the eve of Maha Shivratri, the devotees observe fast

and perform puja throughout the night.

Maha Shivratri is celebrated in all parts of Odisha.

Mahendragiri, Gupteshwar, Kapilas, Puri,
Bhubaneshwar and Khiching etc. are some of the places
in Odisha where the festival of Maha
Shivaratri can be best enjoyed.

Lingaraj temple and Hakateshwar temple are the two

major centers of the Shivratri celebration in
Odisha. Besides, the Shivratri celebration at Loknath
temple in Puri is also very popular in
Odisha and is visited by a large number of devotees on
this holy occasion. </p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="makar-mela-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Makar Mela</h1>
<p class="card-text">
Makar Mela or Makar Sankranti is yet another important
festival of Odisha. During the festival,
the people of Odisha offer prayers and food to the Sun
God and seek blessings for a healthy and
prosperous life. The festival holds traditional cultural
significance for the people of the
state.

203
 Firstly this festival is very near to the traditional new year
of Odisha and secondly, it holds
astronomical importance for those who believe that life is
affected by the movement of celestial
bodies. Since the celebrations take place in every district
of Odisha but few places have a view
of relish forever. </p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="mukteswar-dance-festival-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Mukteswar Dance Festival</h1>
<p class="card-text">
The Mukteshwar Dance Festival concentrates exclusively
on Odissi dance. It features solo, duet
and group Odissi performances by young and senior
artists. Reputed troupes from Odisha and
elsewhere in India perform at the festival. It takes place in
the courtyard of one of
Bhubaneswar's most prominent and well preserved
temple complexes that's more than 1,100 years
old. The Mukteshwar temple is one of the smallest and
most compact temples in Bhubaneshwar. </p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="nuakhai-fs.jpg" alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Nuakhai</h1>
<p class="card-text">
204
 Nuakhai, as the name, suggests that Nua means New and
Khai means Food. So, the festival of
Nuakhai is a festival to celebrate newly harvested food by
the farmers. One day after the
celebration of Ganesh Chaturthi it is celebrated especially
in the Western part of Odisha with
much pomp and jubilation. People staying in distant lands
come back to their native places, wear
new clothes and offer prayers before God and eat
delicious foods prepared from the newly
harvested crops</p>

</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="puri-beach-festival-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Puri Beach Festival</h1>
<p class="card-text">
Celebrated in the month of November, Puri beach festival
organized at the shore of Puri graces
and occupies the heart of travelers for five long days. The
festival gives you a chance to
explore the nuances of the inhabitants of Puri, Odisha,
who display a radical attitude towards
changing environs and are yet deeply religious and
conservative at heart. With a backdrop of
temples, of which the Lord Jagannath Temple dominates
the skyline, the Puri Beach is a showcase
for Odisha's and India's reservoir of talent. From cultural
events, classical and folk dance
performances, sand sculptures, handicrafts and food
festivals to rock concerts, DJs, beach
parties and fashion shows; Puri Beach Festival has all the
ingredients to establish it as an
international festival. </p>
205
 </div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="pushpagiri-bj.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">International Sand Art Festival
</h1>
<p class="card-text">
International Sand Art Festival is a popular festival
related to Sand Art and Tourism organized
by Odisha Tourism from 1st December to 5th December
at Konark, Odisha, India. Many sand artists
from India and from other countries are participating in
this competition.

As this is an international level event so thousands of

people from all over the world are
coming to see this festival, but most of the population
belongs to Odisha and India. For the
peoples those love sand art they visit this International
Sand Art Festival every year and enjoy
here by seeing the making process of sand art. </p>
<button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="rajarani-music-festival-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Rajarani Music Festival
</h1>
206
 <p class="card-text">
Rajarani Music Festival is celebrated from 18th January
to 20th January every year, the festival
is just a way to cherish the art form which has been the
soul of the eastern state. Music
enthusiasts and artists from across the globe come to
Odisha to relish the heartwarming beats of
the Odissi Music, and that's the reason why it is one of
the top festivals of Odisha. Using the
backdrop of Rajarani Temple which finds its place in the
Temple city of India Bhubaneswar, the
festival is just way for devotees to come here on a
spiritual vacation, seek blessings and also
rejuvenate in the classical form of music. </p>
<button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="rakhi-purnima-fs.jpg"
alt="Maldives" />
<div class="card-content">
<h1 class="card-header">Gamha Purnima & Rakhi
Purnima</h1>
<p class="card-text">
Rakhi Purnima is one of the special occasions in India
which celebrates the eternal relation
between a brother and sister. The festival is celebrated on
the full-moon day of the month of
Sravana which falls in the month of August. On this
auspicious day, the sister ties a Rakhi on
the hand of the brother as a mark of love and honor.
Rakhi threads are better known as Dori. The
festival is marked by the tying of a Rakhi or Holy Thread
by the sister on the wrist of her
brother. The brother in return offers a gift to his sister and
promise to look after her. </p>
207
 <button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>

<div class="grid-item">
<div class="card">
<img class="card-img" src="rath-yatra-fs.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Bhitarkanika National Park : The
Wonder in the Wild</h1>
<p class="card-text">
Ratha Yatra is a major Hindu festival associated with
Lord Jagannath held at Puri in India
during the months of June or July.

The Puri Rath Yatra is world-famous and attracts not only

from India but also from the different
parts of the world. Rath Yatra, in other words, the Chariot
Festival is the only day when
devotees who are not allowed into the temple can get a
chance to see the deities. This festival
is a symbol of equality and integration. The 3 deities,
Lord Jagannath, his elder brother Lord
Balabhadra and their sister Subhadra are worshiped
within the temple, on this festival they are
taken to the streets of Puri so that everyone can have the
fortune to see them. The 3 deities
make an annual journey to their aunt's Temple(Gundicha
Temple), 2 km away from Lord Jagannath
temple.

</p>
<button class="card-btn">Visit
<span>&rarr;</span></button>
</div>
</div>
</div>
208
 <div class="grid-item">
<div class="card">
<img class="card-img" src="sitalsasthi-fs.jpg" alt="Maldives"
/>
<div class="card-content">
<h1 class="card-header">Sital Sasthi</h1>
<p class="card-text">
The Hindu festival of Sital Sasthi celebrates the marriage
of Lord Shiva and Goddess Parvati.
The festival is celebrated on the sixth day of the bright
fortnight in the Hindu month of
Jyestha which corresponds to the months of May-June in
the Gregorian calendar. The festival is
celebrated especially in the Sambalpur district of Odisha.
The three-day celebration is called
the Sital Sasthi Yatra, wherein a family is chosen to play
the role of Goddess Parvati's family
to propose marriage to Lord Shiva. Since Shiva is known
as Swayam Bhu, no one plays the role of
his family. The festival is attended by a large number of
Hijras and Eunuchs, as Shiva is also
referred to as Ardhanarishwara. </p>

</div>
</div>
</div>
</div>
</body>

</html>

fest.css:-

@import
url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
*{
margin: 0;
padding: 0;
209
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

body {
background-image: repeating-radial-gradient(rgb(136, 244, 93),
rgb(246, 246, 80) 10%, rgb(33, 106, 216) 15%);
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.grid h1 {
text-align: center;
border-style: outset;
border-color: #3363ff;
font-family: 'Times New Roman', Times, serif;
border-width: 10px;
}

.grid {
display: table;
width: 100em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}

.nav {
width: 100%;
height: 60px;
background-color: white;
210
 box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
position: fixed;
z-index: 999;
}

ul {
list-style-type: none;
}

ul li {
float: right;
width: 140px;
height: 60px;
font-size: 20px;
line-height: 60px;
}

ul li a {
text-decoration: none;
color: black;
display: block;
}

ul li a:hover {
background-color: #0cd2f3;
transition: 1s all ease;
}

ul li ul li {
display: none;
background-color: antiquewhite;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
height: 50px;
transition: 1s all;
}

ul li:hover ul li {
display: block;
transition: 1s all;
animation: drop 1s ease;
211
}

@keyframes drop {
0% {
transform: scale(2, 2) rotatex(90deg);
}
100% {
transform: scale(1, 1) rotatex(0deg);
}
}

.grid-item {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
margin-bottom: 30px;
}

.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
display: block;
width: 100%;
height: 40rem;
object-fit: cover;
}

.card-content {
padding: 3rem;
}

.card-header {
font-size: 3rem;
font-weight: 500;
212
 color: #0d0d0d;
margin-bottom: 1.5rem;
}

.card-text {
font-size: 1.6rem;
letter-spacing: 0.1rem;
line-height: 1.7;
color: #3d3d3d;
margin-bottom: 2.5rem;
}

.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 2rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}

.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
213
}

.title {
font-size: 3rem;
text-align: center;
border-style: inset;
background-color: #e8d9d9;
margin-bottom: 2rem;
color: rgb(60, 66, 148);
text-shadow: 2px 2px 4px #2eb6a6ac;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman',
serif;
}

@media only screen and (max-width: 60em) {

body {
padding: 3rem;
}
.grid {
grid-gap: 3rem;
}
}

aboutus.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">

214
 <title>Preview About</title>
<link rel="stylesheet" href="aboutus.css">
</head>
<body>
<nav>
<img src="logo.png" alt="">
<img src="gscen_logo11.png" alt="">
<div class="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="discover.php">About Odisha</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="contactus.php">Contact us</a></li>
<li><a href="registration.php">Register</a></li>
</ul>
</div>
</nav>
<div class="wrapper">

<div class="background-container">
<div class="bg-1"></div>
<div class="bg-2"></div>

</div>
<div class="about-container">

<div class="image-container">
<img src="abt.png" alt="">

</div>

<div class="text-container">
<h1>About us</h1>
<p>Ek Bharat Shreshtha Bharat</p>

</div>

</div>
</div>
215
</body>
</html>

aboutus.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}

.wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.background-container {
width: 100%;
min-height: 100vh;
display: flex;
}

.bg-1 {
flex: 1;
background-color: rgb(14, 95, 153);
}

.bg-2 {
flex: 1;
background-color: rgb(47, 158, 164);
}

.about-container {
width: 85%;

216
 min-height: 80vh;
position: absolute;
background-color: white;
box-shadow: 24px 24px 30px #6d8dad;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 40px;
border-radius: 5px;
}

.image-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}

.image-container img {
width: 500px;
height: 500px;
margin: 20px;
border-radius: 10px;
}

.text-container {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
font-size: 22px;
}

.text-container h1 {
font-size: 70px;
padding: 20px 0px;
}

.text-container a {
217
 text-decoration: none;
padding: 12px;
margin: 50px 0px;
background-color: rebeccapurple;
border: 2px solid transparent;
color: white;
border-radius: 5px;
transition: .3s all ease;
}

.text-container a:hover {
background-color: transparent;
color: black;
border: 2px solid rebeccapurple;
}

@media screen and (max-width: 1600px) {

.about-container {
width: 90%;
}
.image-container img {
width: 400px;
height: 400px;
}
.text-container h1 {
font-size: 50px;
}
}

@media screen and (max-width: 1100px) {

.about-container {
flex-direction: column;
}
.image-container img {
width: 300px;
height: 300px;
}
.text-container {
align-items: center;
}
218
}

contactus.php:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Preview About</title>
<link rel="stylesheet" href="aboutus.css">
</head>
<body>
<nav>
<img src="logo.png" alt="">
<img src="gscen_logo11.png" alt="">
<div class="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="discover.php">About Odisha</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="contactus.php">Contact us</a></li>
<li><a href="registration.php">Register</a></li>
</ul>
</div>
</nav>
<div class="wrapper">

<div class="background-container">
<div class="bg-1"></div>
<div class="bg-2"></div>

</div>
<div class="about-container">

219
 <div class="image-container">
<img src="abt.png" alt="">

</div>

<div class="text-container">
<h1>Contact us</h1>
<p>Phone: +91-7757013858</p>
<p>Email: [email protected]</p>

</div>

</div>
</div>

</body>
</html>

Registration.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Member Registration Form</title>
</head>
<body>
<div class="container">
<form action="connection.php" method="post">
<div class="title">
Registration Form
</div>
<div class="form">

220
 <div class="input_field">
<label>First Name</label>
<input type="text" placeholder="First Name"class="input"
name="fname" required>
</div>

<div class="input_field">
<label>Last Name</label>
<input type="text" placeholder="Last Name" class="input"
name="lname" required>
</div>

<div class="input_field">
<label>Selct Gender</label>
<div class="custom_selectbox">
<select name="gender"required>
<option>select</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>

<div class="input_field">
<label>Class</label>
<div class="custom_selectbox">
<select name="cl">
<option value="Not Selected">select</option>
<option value="BCCA I">BCCA I</option>
<option value="BCCA II">BCCA II</option>
<option Value="BCCA III">BCCA III</option>
<option value="BCOM I">BCOM I </option>
<option value="BCOM II">BCOM II</option>
<option Value="BCOM III">BCOM III</option>
<option value="BCOM F&A I">BCOM F&A I</option>
<option value="BCOM F&A II">BCOM F&A II </option>
<option value="BCOM F&A III">BCOM F&A III</option>
<option value="BCOM HONS I">BCOM HONS I</option>
221
 <option value="BCOM HONS II">BCOM HONS II</option>
<option value="BCOM HONS III">BCOM HONS
III</option>
</select>
</div>
</div>

<div class="input_field">
<label>Medium</label>
<div class="custom_selectbox">
<select name="med" required>
<option value="Not Selected">select</option>
<option value="BCOM E1">BCOM E1</option>
<option value="ENGLISH">ENGLISH(for Non-grant
section)</option>
<option value="BCOM HINDI">BCOM HINDI</option>
<option value="BCOM MARATHI">BCOM
MARATHI</option>
</select>
</div>
</div>

<div class="input_field">
<label>Email Address</label>
<input type="email" placeholder="Email address"
class="input" name="email" required>
</div>

<div class="input_field">
<label>Phone Number</label>
<input type="Number" placeholder="Phone Number"
class="input" name="phnumber" required>
</div>

<div class="input_field">
<label>Address</label>
<textarea class="textarea" name="address" maxlength="100"
minlength="10"></textarea>
</div>

222
 <div class="input_field terms">
<label class="check">
<input type="checkbox" name="chkbox">
<span class="checkmark"></span>
</label>
<p>Agree to terms and condition</p>
</div>
<div class="input_field">
<input type="submit" value="Register" class="btn"
name="register" onclick="fun();"/>
</div>
</div>
</form>
</div>
</body>
</html>

Style2.css

*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}

body {
font-family: 'Times New Roman', Times, serif;
background-image: url(god.jpg);
/*padding: 0% 1px;*/
background-size: cover;
}

.container {
border: 2px solid black;
max-width: 400px;
width: 100%;
background-color: transparent;
margin: 10px auto;
padding: 10px;
box-shadow: 5px 5px 5px rgba(108, 87, 87, 0.9);
223
 background-size: cover;
}

.container .title {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
text-align: center;
}

.container .form {
width: 100%;
}

.container .form .input_field {

margin-bottom: 15px;
display: flex;
align-items: center;
}

.container .form .input_field label {

width: 200px;
margin-right: 5px;
font-size: 20px;
background-color: transparent;
border-radius: 5px;
}

.container .form .input_field .input,

.container .form .input_field .textarea {
/*border: 2px solid black;*/
width: 100%;
height: 35px;
outline: none;
border: 4px solid aqua;
font-size: 15px;
padding: 8px 10px;
border-radius: 5px;
transition: all 0.5 ease;
224
 background-color: transparent;
}

.container .form .input_field .textarea {

resize: none;
height: 80px;
}

.container .form .input_field .custom_selectbox {

position: relative;
width: 105%;
height: 35px;
padding-bottom: 10px;
}

.container .form .input_field .custom_selectbox select {

-webkit-appearance: none;
appearance: none;
/*position: relative;*/
width: 100%;
height: 40px;
margin-right: 7px;
padding: 8px 8px;
border: 4px solid aqua;
/*text-align: center;*/
border-radius: 5px;
background-color: transparent;
}

.container .form .input_field .custom_selectbox:before {

content: "";
position: absolute;
top: 12px;
right: 10px;
border: 4px solid black;
border-color: violet transparent transparent transparent;
pointer-events: none;
}

.container .form .input_field .input:focus,

225
.container .form .input_field .textarea:focus {
border: 2px solid black;
}

.container .form .input_field .custom_selectbox select:focus {

border: 2px solid black;
}

.container .form .input_field p {

font-size: 14px;
color: #757575;
}

.container .form .input_field .check {

width: 20px;
height: 20px;
position: relative;
display: block;
cursor: pointer;
}

.container .form .input_field .check input[type="checkbox"] {

position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.container .form .input_field .check .checkmark {

width: 20px;
height: 20px;
border: 1px solid violet;
display: block;
position: relative;
}

.container .form .input_field .check .checkmark::before {

content: "";
position: absolute;
top: 2px;
226
 left: 3px;
width: 7px;
height: 4px;
border: 2px solid;
border-color: transparent transparent white white;
transform: rotate(-45deg);
}

.container .form .input_field .check

input[type="checkbox"]:checked~.checkmark {
background: violet;
}

.container .form .input_field .check

input[type="checkbox"]:checked~.checkmark::before {
display: block;
}

.container .form .input_field .btn {

width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 0;
background-color: rgb(56, 178, 187);
cursor: pointer;
border-radius: 3px;
outline: none;
}

.container .form .input_field:last-child {

margin-bottom: 0;
}

.container .form .input_field .btn:hover {

background-color: purple;
}
@media (max-width:400px) {
/*body{
background-color: blue;

227
 }*/
.container .form .input_field {
flex-direction: column;
align-items: flex-start;
}
.container .form .input_field label {
margin: 5px;
}
.container .form .input_field.terms {
flex-direction: row;
}
}

Display.php

<?php
require_once('connection.php');
$query = "Select * from list";
$result = mysqli_query($con, $query);

?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>

228
#student {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#student td,
#student th {
border: 1px solid #ddd;
padding: 8px;
}

#student tr:nth-child(even) {
background-color: black;
}

#student tr:hover {
background-color: orange;
}

#student th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: greenyellow;
color: gray;
}

#student tr {

padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: black;
color: aquamarine;
}

h1 {
font-size: 60px;
text-align: center;
229
 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-family: Merriweather, serif;
}

button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 1px 1px;
cursor: pointer;
}
</style>
</head>

<body>
<h1>List of Registered Student</h1>

<table id="student">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Class</th>
<th>Medium</th>

<th>Email</th>
<th>Phone</th>
<th>Address</th>
</tr>
<tr>

230
 <?php
while ($row = mysqli_fetch_assoc($result)) {
?>
<td>
<?php echo $row['First Name']; ?>
</td>
<td>
<?php echo $row['Last Name']; ?>
</td>
<td>
<?php echo $row['Gender']; ?>
</td>
<td>
<?php echo $row['Class']; ?>
</td>
<td>
<?php echo $row['Medium']; ?>
</td>
<td>
<?php echo $row['Email']; ?>
</td>
<td>
<?php echo $row['Phone']; ?>
</td>
<td>
<?php echo $row['Address']; ?>
</td>
</tr>
<?php
}
?>

</table>

</body>

</html>

231
Output Screen:-

Index.php

232
233
discover.php

234
lang.php

235
histmain.php

236
eminent.php:-

237
nilamani.php

238
cusine.php

239
beaches.php:-

beachesinfo.php:-

240
Wild.php:-

241
balasore.php:-

242
temple.php:-

243
fest.php:-

244
Display.php:-

245
Testing and Validation

246
1) Acceptance Testing: Acceptance Testing is performed by the client
and verifies that the system is full fill the business requirements and as it is
as per the needs of the end-user. The client accepts the website because all
the features and functionalities work as expected. It is the last phase of the
testing, after which the website goes into production. This is also called User
Acceptance Testing (UAT).
2)Accessibility Testing: Accessibility Testing is determine that the
website is accessible via through Internet Here, disability means deaf, color
blind, mentally disabled, blind, old age, and other disabled groups. Various
checks are performed such as font size for the usually ddisabledcolor and
contrast color blindness, etc.
3) Beta Testing: Beta Testing is a formal type of website Testing that is
carried out by the customer. It is performed in the Real Environment before
releasing the website to the market for the actual end-users. Beta Testing is
carried out to ensure that there are no major failures in the software or food
product and it satisfies the food business requirements from an end-user
perspective. Beta Testing is successful when the customer accepts the
software.
4) Back-end Testing: Whenever an input or data is entered on the front-
end webpage, it stores in the database and the testing of such database is
known as Database Testing or Backend 106 Testing. There are different
databases like SQL Server, MySQL, Oracle, etc. Database Testing involves
testing table structure, schema, stored procedure, data structure, and so on. -
251 -

247
5) Browser Compatibility Testing:- It is a subtype of Compatibility
Testing (which is explained below) and is performed by the testing team.
Browser Compatibility Testing is performed for web applications and it
ensures that the software can run with a combination of different browser
operating systems. This type of testing also validates whether the web
application runs on all versions of all browsers or not. And these website is
compatible with any browser.
6) Compatibility Testing: It is a testing type in which it validates how
software behaves and runs in a different environment, web servers,
hardware, and network environment. Compatibility testing ensures that web
applications can run on a different configuration, different databases,
different browsers, and their versions. Compatibility testing is performed by
the testing team.
7) Component Testing:- It is mostly performed by developers after the
completion of unit testing. Component Testing involves testing multiple
functionalities as a single code and its objective is to identify if any defect
exists after connecting

248
System Security Measures

249
System Security Measures:
We take System Security measures seriously to protect this website from
data breaches and various phishing attacks and assure you that unauthorized
persons can access the website information with the purpose of mala fide
motivation.
To protect the website and enhance the Website regarding its security and
data processing efficiency we follow all security measures and check all
components (hardware and software) and their durability which helps to run
the website over the long efficiently try.

250
Implementation,
Evaluation, and
Maintenance

251
Implementation:
Implementation refers to the post-sales process of guiding a client from
purchase to use of the software or hardware that was purchased. This
includes requirements analysis, scope analysis, customizations, systems
integrations, user policies, user training, and delivery. In the current system,
we find more bugs and errors, so these bugs and errors get solved in the new
system.
As this website is based on EBSB Club Which Provides Detail information
about Odisha State at the time of implementation we assure you that every
piece of information should be correct and authentic.
Evaluation:
Evaluation is a process that critically examines a program. It involves
collecting and analyzing information about a program’s activities,
characteristics, and outcomes. Its purpose is to make judgments about a
program, to improve its effectiveness, and to inform programming decisions.
The evaluation process includes the study of the existing system and its
drawbacks and the various option to improve the system. the concentration
should be on satisfying the primary requirements of the users. the system is
evaluated based on In This Project, we evaluated the system which already
exists. At the time of developing this project.
Maintenance:
After Developing this website we keep in mind various aspect such as
analyzing performance fixing bugs removing viruses and preventing to
maintain the website on daily increases the efficiency of the website
regarding daily traffic comes on the website

252
Future Scope of the Project

253
 Future Scope:
At the time of development of this project we remove some drawbacks from
the already existing system and improve the efficiency of this new system
after developing the website we observed that certain aspect needs to
develop in the future which are
• We can Include Quizzes related to Odisha State Which increase the
knowledge of Students.
• We can develop a Virtual Gallery of Every Page which Provides only
theoretical information regarding the Diversity of Odisha
• We can Develop a tour Planner page on this website so the student can
estimate the basic budget whenever they are willing to visit Odisha.
• In the Future we can Create a page on which students can Find The
Similarity Between Both States.
These are the various aspects that should be considered regarding the future
scope.

254
Suggestion and Conclusions

255
Conclusion
We Have to Develop This Website By Using HTML CSS and PHP and to
connect the form to the website we use MYSQL this website is a dynamic
website that will provide information about Odisha state in detail and
provide a facility for registration to students so they can become part of this
club and Nodal officer of this club can easily know the name of the
registered student so it helps to contact with them at the time of organizing
various program under the club. This Website has d ailed information. which
explains the Unity In Diversity Very Well. No need to visit many websites
for information regarding various aspects of knowledge that we have gained
during developing the website not help in exams but also in the future as
well.

256
Bibliography and Reference

257
 Bibliography and References:

• https://www.google.com/
• https://nriol.com/indian-languages/oriya-page.asp
• https://omniglot.com/writing/oriya.htm
• https://historyofodisha.in/anglo-maratha-conflicts-in-odisha/#1
• https://www.orissatourism.org/odisha-fair-festivals/
• https://www.orissatourism.org/odisha-wildlife/
• https://en.wikipedia.org/wiki/Odisha

258
 A
PROJECT SYNOPSIS
ON

“Ek Bharat Shreshta Bharat Club”

Submitted to

G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR

AUTONOMOUS
In the Partial Fulfillment of

B.Com. (Computer Application) Final Year

Synopsis Submitted by

Shailendra Singh
Gaurav Kshirsagar

Under the Guidance of Pravin J. Yadao

Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR
AUTONOMOUS
2022-2023
259
1. Introduction: (Write 4 to 5 lines):-
Ek Bharat Shreshtha Bharat is an initiative taken by the central government
to enhance interaction & promote mutual understanding between people of
different states/UTs through the concept of state/UT pairing. The states carry
out activities to promote a sustained and structured cultural connection in the
areas of language learning, culture, traditions & music, tourism & cuisine,
sports, and sharing of best practices, etc.
In this project, we will go to make a website that represents the Ek Bharat
Shreshtha Bharat club of our college it consists of information about
historical, cultural, natural, and several other information for example:-
Tribal Communities in Odisha, Etc.
This Website will help the college club administration to manage the
registration of students and helps to know about Odisha state in detail
because all the important information regarding the state will be available on
the club website so we are only required to give information to students that
such website of college club exists, and they can visit the website to know
more about the initiative of college club and the program is taken by the
club.

2. Objectives of the project: (Write only 5 points)

I. To provide information about Ek Bharat Shreshtha
Bharat Initiative.
II. To provide a digital platform to the college club.
III. To make the students aware of Ek Bharat Shreshtha Bharat
initiative.
IV. To increase participation.
V. To Ease the process of EBSB Club.

260
4. Project Category: Dynamic Website
5. Tools/ Platform/ Languages to be used:
To make the website of the “Ek Bharat Shreshtha Bharat club ” we are going
to use the following technology and languages:-
I. Languages:- HTML, CSS, PHP-MYSQL, Javascript.
II. Platform:- Visual Studio Code, Sublime text editor.
III. Other Technology:- Bootstrap etc.

6. Scope of future application: (Write 4 to 5 points)

This project will help in the following aspect in the future:
I. It will make the registration process for the club easy.
II. Students can get information about the club at their fingertips.
III. No need to contact physically to the authority of the College club.
IV. Makes information available digitally to everyone.
V. Eliminates the creation of registration of Google Forms for each
different event.

Submitted by, Approved by,

Gaurav Kshirsagar
Shailendra Singh Prof. Pravin Yadao
Project Guide

261