Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 68

MAIN PAGE HTML CODE-

<!DOCTYPE html>
<head>
<title>Seven Wonders</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="path_to_your_flag_icon_css_file"
/>
</head>

<body>
<!-------------Header Section------------------->
<header class="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>

<div id="menu-icon" class="fas fa-bars"></div>

<nav>
<ul class="navbar">
<li><a href="#home-section">Home</a></li>
<li><a href="#about-section">About</a></li>
<li><a href="#explore-section">Explore The Wonders</a></li>
<li><a href="#team-section">Our Team</a></li>
<li><a href="#contact-section">Contact Us</a></li>
<li><a href="#feedback-section">Feedback</a></li>
</ul>
</nav>

</header>
<!-------------------Home Section---------------------->
<section class="home" id="home-section">
<img src="time6.jpg" alt="" id="home-image" />
<h1 class="heading">
"Seven wonders, timeless testaments to human endeavor."
</h1>
</section>

<!-----------------------About Section---------------------->
<section id="about-section">
<h2 class="sectional-heading">About the Seven Wonders</h2>
<div class="about-content">
<p>
The Seven Wonders of the Modern World are not just architectural
masterpieces but also symbols of mankind’s ability to dream, design,
and
build. They are monuments to human aspiration, ambition, and tenacity.
Each of these wonders tells a story of a civilization, its people,
their
culture, and their values. They are a testament to the fact that when
humanity sets its mind to something, it can create truly awe-inspiring
works. <br /><br />
These wonders are spread across the globe, each standing proudly in
its
unique landscape, yet together they form a collective portrait of our
world - diverse, dynamic, and beautiful. They remind us that despite
our
differences in language, culture or geography, we all share a common
heritage and a capacity for greatness. <br /><br />
From the Great Wall of China that snakes across mountains and valleys,
to the towering Christ the Redeemer overlooking Rio de Janeiro; from
the
ancient city of Petra carved into Jordan’s pink sandstone cliffs to
the
iconic Colosseum in the heart of Rome; from the mysterious Machu
Picchu
perched high in the Andes to the stunning Taj Mahal reflecting in the
Yamuna River; and finally to Chichén Itzá, a testament to the advanced
astronomical knowledge of the Maya civilization - each wonder has a
unique tale to tell. <br /><br />
In essence, these Seven Wonders are a celebration of humanity’s
creativity and determination. They inspire us to keep exploring, keep
dreaming, and keep building for a better tomorrow.
</p>
<img src="about1.jpg" alt="Map" />
</div>
</section>
<!------------------------Explore Section--------------------------->
<section id="explore-section">
<h2 class="sectional-heading">Explore the Wonders</h2>

<div class="wonders-section">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img
src="greatwall.jpg"
alt="Great Wall Of China"
class="playcard-img"
/>
<h3 class="card-heading">Great Wall Of China</h3>
</div>
<div class="card-back">
<p>China</p>
<p>7th Centuary BC</p>
<p>
Fun Fact: The Great Wall is not a continuous line. There are
side
walls, parallel walls, and sections with no wall where high
mountains or rivers form a natural barrier.
</p>
<br />
<a href="great_wall.html">Read More</a>
</div>
</div>
</div>

<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="taj_mahal.jpg" alt="Taj Mahal" class="playcard-img" />
<h3 class="card-heading">Taj mahal</h3>
</div>
<div class="card-back">
<p>India</p>
<p>1632-1653</p>
<p>
Fun Fact: The Taj Mahal changes its color depending on the
amount
of light and time of day. It is pinkish in the morning, milky
white in the evening, and golden when lit by moonlight
</p>
<br />
<a href="taj_mahal.html">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="petra.jpg" alt="Petra" class="playcard-img" />
<h3 class="card-heading">Petra</h3>
</div>
<div class="card-back">
<p>Jordan</p>
<p>312 BC</p>
<p>
Fun Fact: Petra was a hidden city, lost to the Western world
until
it was rediscovered in 1812 by Swiss explorer Johann Ludwig
Burckhardt. Its location was kept secret, adding to its allure
and
mystery.
</p>
<br />
<a href="petra.html">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img
src="chichen_itza.jpg"
alt="Chichen Itza"
class="playcard-img"
/>
<h3 class="card-heading">
The Chichen Itza Pyramid <br />(El Castillo)
</h3>
</div>
<div class="card-back">
<p>Mexico</p>
<p>8th- 12th Centuries AD</p>
<p>
Fun Fact: Each of the pyramid’s four sides has 91 steps which,
when added together and including the temple platform on top as
the final “step”, produces a total of 365 steps—the number of
days
in a year.
</p>
<br />
<a href="chichen_itza.html">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img
src="colosseum.jpg"
alt="Roman Colosseum"
class="playcard-img"
/>
<h3 class="card-heading">The Roman Colosseum <br
/>(Colosseum)</h3>
</div>
<div class="card-back">
<p>Italy</p>
<p>72-80 AD</p>
<p>
Fun Fact: The Colosseum could seat approximately 50,000
spectators
who would come to watch sporting events and games. These events
included gladiatorial combats, wild animal hunts and, believe it
or not, ship naval battles!
</p>
<br />
<a href="colosseum.html">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img
src="machu_picchu.jpg"
alt="Machu Picchu"
class="playcard-img"
/>
<h3 class="card-heading">Machu Picchu</h3>
</div>
<div class="card-back">
<p>Peru</p>
<p>1450 AD</p>
<p>
Fun Fact: The Incas that lived at Machu Picchu cultivated the
coca
crop, from which cocaine is derived. Many of their rituals were
associated with coca agriculture.
</p>
<br />
<a href="machu_picchu.html">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img
src="christ.jpg"
alt="Christ the Redeemer"
class="playcard-img"
/>
<h3 class="card-heading">
Christ the Redeemer <br />(Statue of Christ the Redeemer)
</h3>
</div>
<div class="card-back">
<p>Brazil</p>
<p>1922-1931</p>
<p>
Fun Fact: The statue was struck by lightning during a violent
electrical storm on February 10, 2008. The storm caused havoc in
Rio, felling trees in several neighborhoods, but the statue was
left unscathed.
</p>
<br />
<a href="christ.html">Read More</a>
</div>
</div>
</div>
</div>
</section>

<!--------------TEAM- SECTION------------------->

<section id="team-section">
<h2 class="sectional-heading">Our Team</h2>
<div class="team-members">
<div class="member">
<div class="member-image">
<img src="user.jpg" alt="Member 1" />
<div class="member-info">
<h3>Rahul Sharma</h3>
<p>Registration Number: 1424696</p>
</div>
</div>
</div>
<div class="member">
<div class="member-image">
<img src="user.jpg" alt="Member 2" />
<div class="member-info">
<h3>Abhishek</h3>
<p>Registration Number: 1421502</p>
</div>
</div>
</div>
</div>
</section>

<!---------------------CONTACT US-------------->

<section id="contact-section">
<h2 class="sectional-heading">Contact Us</h2>
<div class="contact-info">
<div class="info-item">
<p class="info-description">
<i class="fas fa-map-marker-alt"></i><br />
<strong>Address:</strong>
123 Main St, Anytown, Anystate
</p>
</div>

<div class="info-item">
<p class="info-description">
<i class="fas fa-phone"></i><br />
<strong>Call Us:</strong>
(123) 456-7890
</p>
</div>

<div class="info-item">
<p class="info-description">
<i class="fas fa-envelope"></i><br />
<strong>Email Us:</strong>
info@example.com
</p>
</div>

<div class="info-item">
<p class="info-description">
<i class="fas fa-clock"></i> <br />
<strong>Open At:</strong>
Mon-Fri 9am-5pm
</p>
</div>
</div>
</section>

<!----------------------Feedback Section--------------->

<section id="feedback-section">
<h2 class="sectional-heading">Feedback</h2>

<form action="/submit_feedback" method="post">


<label for="name">Name:</label><br />
<input
type="text"
id="name"
name="name"
placeholder="Write down your Full Name without any intials"
maxlength="30"
required
/><br />
<label for="email">Email ID:</label><br />
<input
type="email"
id="email"
name="email"
placeholder="Write down your Email Id"
required
/><br />
<label for="feedback">Feedback:</label><br />
<textarea
id="feedback"
name="feedback"
placeholder="Start writing down here..."
maxlength="500"
required
></textarea
><br />
<input type="submit" value="Submit" />
</form>
</section>

<!----------------------------Footer------------------------->

<footer>
<div class="footer-content">
<div class="footer-inside">
<ul class="links">
<h3>Useful Links</h3>
<li><a href="#home-section">Home</a></li>
<li><a href="#about-section">About</a></li>
<li><a href="#explore-section">Explore The Wonders</a></li>
<li><a href="#team-section">Our Team</a></li>
<li><a href="#contact-section">Contact Us</a></li>
<li><a href="#feedback-section">Feedback</a></li>
</ul>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<ul class="links">
<h3>Follow Us</h3>
<li><a href="https://www.facebook.com/login/">Facebook</a></li>
<li><a href="https://www.instagram.com/">Instagram</a></li>
<li><a href="https://web.whatsapp.com/">WhatsApp</a></li>
<li><a href="https://twitter.com/?lang=en">X</a></li>
<li><a href="https://www.youtube.com/">YouTube</a></li>
</ul>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
<p class="end-content">
<b>Disclaimer-</b> This website is created for educational purposes
only. All images and information presented are solely used for the
purpose of education and belong to their respective owners. Any
coincidental resemblance with real-life persons, places, or objects is
purely coincidental. This website is not intended for actual
commercial
use. <br /><br />
All rights are reserved by the owner of this website. The content of
this website may not be used or reproduced without the owner’s
consent.
Any unauthorized use is strictly prohibited.
</p>
</div>
</footer>

<script src="script.js"></script>
</body>

MAIN PAGE CSS CODE-


* {
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
margin: 0%;
}

/*--------------------------Header Section----------------------*/
header {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: rgb(249, 230, 249);
width: 100%;
}

#logo img {
height: 125px;
margin-left: 10px;
}

.navbar {
list-style-type: none;
margin-top: 40px;
margin-right: 10px;
}

.navbar li a {
text-decoration: none;
transition: color 0.3s ease;
}

.navbar li a:hover {
color: rgb(108, 107, 221);
}

.navbar li {
color: purple;
display: inline-block;
margin: 0 10px;
font-size: 18px;
transition: transform 0.3s ease;
}
.navbar li:hover {
transform: translateY(-5px);
}

#menu-icon {
font-size: 3rem;
border-radius: .5rem;
border: .1rem solid green;
padding: .8rem 1.5rem;
color: green;
cursor: pointer;
display: none;
}

.navbar.active {
display: block;
}

/*-----------------------Home Section--------------------------*/
.home {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #f8f9fa;
position: relative;
}

#home-image {
width: 100%;
height: 700px;
}

.heading {
font-size: 56px;
position: absolute;
top: auto;
left: 49%;
margin-right: 45px;
color: rgb(245, 245, 220);
}

/*-----------------------------About Section-----------------------------*/
#about-section {
padding: 20px;
background-color: rgb(249, 230, 249);
width: 100%;
}
.sectional-heading {
text-align: center;
color: purple;
font-size: 32px;
position: relative;
transition: transform 0.3s ease;
margin-bottom: 60px;
}

.sectional-heading::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
height: 5px;
width: 10%;
border-radius: 20px;
background-color: purple;
}

.sectional-heading:hover {
transform: translateY(-7px);
}

.about-content {
display: flex;
justify-content: space-between;
}

.about-content p {
flex: 1;
margin-right: 40px;
margin-left: 20px;
}

.about-content img {
width: 35%;
height: auto;
margin-right: 20px;
}

/*-------------------------------Explore
Section-------------------------------*/
#explore-section {
background-color: #f8f9fa;
padding: 20px;
}

.wonders-section {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.card {
width: 200px;
height: 300px;
perspective: 1000px;
flex: 1 0 21%;
margin: 20px;
margin-bottom: 100px;
}

.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.card:hover .card-inner {
transform: rotateY(180deg);
}

.card-heading {
background-color: #f8f9fa;
}

.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
backface-visibility: hidden;
}

.card-front .playcard-img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.card-back {
background-color: rgb(249, 230, 249);
color: black;
transform: rotateY(180deg);
overflow: auto;
padding: 10px;
font-size: 14.7px;
border-radius: 10px;
}

/*-----------------TEAM- MEMBERS-----------------*/

#team-section {
padding: 20px;
background-color: rgb(249, 230, 249);
}

.team-members {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.member {
overflow: hidden;
text-align: center;
flex-basis: 25%;
margin: 10px;
transition: transform 0.3s ease;
border-radius: 50%;
box-shadow: 6px 6px 6px 6px rgba(153, 6, 153, 0.232);
}

.member:hover {
transform: translateY(-10px);
}

.member-image {
position: relative;
}

.member img {
width: 100%;
}

.member-info {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: purple;
background-color: #f8f9fa;
width: 100%;
height: 29%;
padding-bottom: 20px;
font-size: smaller;
margin-bottom: 0px;
border-top: 3px solid purple;
}

/*----------------------Contact- Us-----------------------*/
#contact-section {
padding: 20px;
background-color: #f8f9fa;
}

.contact-info {
display: flex;
justify-content: space-around;
}

.contact-info p {
margin-bottom: 10px;
}

.contact-info i {
margin-right: 10px;
}

.info-item {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}

.info-item:hover {
transform: translateY(-10px);
}

.info-description {
display: flex;
flex-direction: column;
font-size: 17px;
}

.info-description i {
font-size: 65px;
}

.info-description strong {
font-size: 25px;
}

.info-item .fa-map-marker-alt {
color: rgb(255, 0, 0);
}

.info-item .fa-phone {
color: rgb(0, 128, 0);
}

.info-item .fa-envelope {
color: rgb(0, 0, 255);
}

.info-item .fa-clock {
color: rgb(128, 128, 128);
}

/*-------------------------Feedback Section-----------------------------*/

#feedback-section {
padding: 20px;
background-color: rgb(249, 230, 249);
}

#feedback-section form {
display: flex;
flex-direction: column;
}

#feedback-section label {
font-size: 22px;
margin-left: 25%;
margin-right: 25%;
}

#feedback-section input {
width: 50%;
height: 40px;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
}

#feedback-section textarea {
width: 50%;
height: 100px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
}

#feedback-section input[type="submit"] {
cursor: pointer;
width: 250px;
height: 60px;
margin-left: auto;
margin-right: auto;
font-size: 23px;
font-weight: bold;
background-color: #008000;
color: white;
}

/*----------------------------Footer
Section----------------------------------*/

footer {
background-color: #333;
color: #8a8a8a;
text-align: center;
padding: 20px;
font-size: 14px;
}

.footer-content {
display: flex;
flex-direction: column;
}

.footer-content img {
width: 90px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
filter: grayscale(100%);
}
.footer-content img:hover {
filter: grayscale(0%);
}

.footer-inside {
display: flex;
justify-content: space-between;
align-items: center;
}

.links {
display: flex;
flex-direction: column;
align-items: center;
margin-left: auto;
margin-right: auto;
}

.links li {
list-style-type: none;
}

.links li a {
color: #8a8a8a;
text-decoration: none;
}

.links h3 {
margin-top: auto;
}

.company-detail {
display: flex;
flex-direction: column;
}

.company-detail p {
margin-top: 10px;
}

.end-content {
margin-top: 0;
}

hr {
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}

/*--------------------------MEDIA QUERIES------------------------------*/

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

/*------------------ALL HEADINGS--------------------*/
.sectional-heading {
text-align: center;
color: purple;
font-size: 24px;
position: relative;
transition: transform 0.3s ease;
margin-bottom: 10px;
}

/*-------------------EXPLORE SECTION-----------------*/
#explore-section {
height: 100%;
padding-bottom: 60px;
}

.wonders-section {
flex-direction: column;
height: 100%;
}

.card {
width: 100%;
margin: 50px auto;
height: 100%;
}

.card-inner {
position: relative;
width: 100%;
height: 270px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.card-back p,
.card-back a {
font-size: 11.5px;
}
.card .card-heading {
font-size: 14px;
}

.card-front .playcard-img {
width: 100%;
}

/*----------------------MENU ITEMS--------------------*/
#menu-icon {
display: initial;
position: absolute;
top: 10px;
right: 10px;
color: white;
border: none;
font-size: 20px;
top: 10px;
right: 10px;
z-index: 1001;
}

nav ul {
display: none;
}

#logo img {
height: 70px;
}

.navbar.active {
display: flex;
}

.navbar {
display: none;
flex-direction: column;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
z-index: 1000;
margin-top: 10px;
}
.navbar li {
display: block;
margin: 10px 0;
font-size: 14px;
}

body.nav-active #logo,
body.nav-active #content {
display: none;
}

html,
body {
margin: 0;
padding: 0;
}

/*---------------------HOME SECTION-----------------------*/

.home {
padding: 5px;
}

#home-image {
width: 100%;
height: auto;
}

.heading {
font-size: 72%;
}

/*------------ABOUT SECTION-------------------*/

.about-content {
flex-direction: column-reverse;
}

.about-content p {
font-size: 11.5px;
margin-right: 0;
margin-left: 0;
}

.about-content img {
width: 100%;
padding-top: 40px;
padding-bottom: 15px;
}

/*----------------------Team Section-------------------------*/

.team-members {
flex-direction: column;
align-items: center;
}

.member {
flex-basis: 100%;
margin: 20px 0;
width: 70%;
margin-left: auto;
margin-right: auto;
}

.member-info {
font-size: 40%;
}

/*-----------------------Contact Us Section-----------------------*/
.contact-info {
flex-direction: column;
align-items: center;
}

.info-item {
margin: 20px 0;
}

.info-description {
font-size: 14px;
}

.info-description i {
font-size: 50px;
}

.info-description strong {
font-size: 18px;
}

form {
padding-top: 45px;
}
/*---------------------FEEDBACK SECTION------------------------*/
#feedback-section label {
font-size: 15px;
margin-left: 10%;
margin-right: 10%;
}

#feedback-section input,
#feedback-section textarea {
width: 80%;
}

#feedback-section input[type="submit"] {
width: 160px;
height: 35px;
font-size: 14px;
}

/*-------------------FOOTER SECTION----------------------*/
.footer-inside {
flex-direction: column;
align-items: center;
}

.links {
padding-bottom: 20px;
}

.links,
.company-detail {
margin-left: auto;
margin-right: auto;
padding-left: 0;
list-style: none;
}

.links li a,
.company-detail p,
.end-content {
font-size: 11.5px;
}

.links h3,
.company-detail img {
font-size: 16px;
}
}

@media (min-width: 320px) and (max-width: 800px) {


/*------------------ALL HEADINGS--------------------*/
.sectional-heading {
text-align: center;
color: purple;
font-size: 24px;
position: relative;
transition: transform 0.3s ease;
margin-bottom: 10px;
}

/*-------------------EXPLORE SECTION-----------------*/
#explore-section {
height: 100%;
padding-bottom: 60px;
}

.wonders-section {
flex-direction: column;
height: 100%;
}

.card {
width: 100%;
margin: 50px auto;
height: 100%;
}

.card-inner {
position: relative;
width: 100%;
height: 270px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.card-back p, .card-back a{
font-size: 14px;
}

.card .card-heading{
font-size: 17px;
}
.card-front .playcard-img {
width: 100%;
}

.card-back {
background-color: rgb(249, 230, 249);
color: black;
transform: rotateY(180deg);
overflow: auto;
padding: 10px;
font-size: 14.7px;
border-radius: 10px;
}

/*----------------------MENU ITEMS--------------------*/

#menu-icon {
display: initial;
position: absolute;
top: 10px;
right: 10px;
color: white;
border: none;
font-size: 22px;
top: 10px;
right: 10px;
z-index: 1001;
}

nav ul {
display: none;
}

#logo img {
height: 90px;
}

.navbar.active {
display: flex;
}
.navbar {
display: none;
flex-direction: column;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
z-index: 1000;
margin-top: 10px;
}

.navbar li {
display: block;
margin: 10px 0;
font-size: 16px;
}

body.nav-active #logo,
body.nav-active #content {
display: none;
}

html, body {
margin: 0;
padding: 0;
}

/*---------------------HOME SECTION-----------------------*/
.home {
padding: 5px;
}

#home-image {
width: 100%;
height: auto;
}

.heading {
font-size: 130%;
}

/*------------ABOUT SECTION-------------------*/

.about-content {
flex-direction: column-reverse;
}

.about-content p {
font-size: 14px;
margin-right: 0;
margin-left: 0;
}

.about-content img {
width: 100%;
padding-top: 40px;
padding-bottom: 15px;
}

/*-----------------TEAM SECTION----------------------*/

.team-members {
flex-direction: row;
justify-content: space-around;
}

.member {
flex-basis: 45%;
margin: 20px 0;
width: 70%;
margin-left: auto;
margin-right: auto;
}

.member-info {
font-size: 50%;
}

/*-------------------CONTACT US SECTION----------------------------*/
.contact-info {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

.info-item {
width: calc(50% - 40px);
}
.info-description {
font-size: 14px;
}

.info-description i {
font-size: 50px;
}

.info-description strong {
font-size: 18px;
}

/*---------------------FEEDBACK SECTION----------------------------*/
form{
padding-top: 45px;
}
#feedback-section label {
font-size: 15px;
margin-left: 10%;
margin-right: 10%;
}

#feedback-section input,
#feedback-section textarea {
width: 80%;
}

#feedback-section input[type="submit"] {
width: 160px;
height: 35px;
font-size: 14px;
}

/*---------------------FOOTER SECTION-----------------------------*/

.footer-inside {
flex-direction: column;
align-items: center;
}

.links{
padding-bottom: 23px;
}
.links,
.company-detail {
margin-left: auto;
margin-right: auto;
padding-left: 0;
list-style: none;
}

.links li a,
.company-detail p,
.end-content {
font-size: 14px;
}

.links h3,
.company-detail img {
font-size: 18px;
}
}

MAIN PAGE JAVASCRIPT CODE-

let menu = document.querySelector('#menu-icon');


let navbar = document.querySelector('.navbar');
let body = document.querySelector('body');

menu.addEventListener('click', () => {
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
body.classList.toggle('nav-active'); // Add this line
});

window.onscroll = () => {
menu.classList.remove('fa-times');
navbar.classList.remove('active');
body.classList.remove('nav-active'); // Add this line

if (window.scrollY > 150) {


header.classList.add('active');
}
else {
header.classList.remove('active');
}
};

body.addEventListener('click', (event) => {


if (event.target !== menu && navbar.classList.contains('active')) {
menu.classList.remove('fa-times');
navbar.classList.remove('active');
body.classList.remove('nav-active');
}
});
document.querySelectorAll(".card").forEach((card) => {
card.addEventListener("click", function () {
this.classList.toggle("is-flipped");
});
});

document.getElementById("name").addEventListener("input", function (e) {


var start = this.selectionStart,
end = this.selectionEnd;
this.value = this.value.replace(/[^a-zA-Z\s]/g, "").toUpperCase();
this.setSelectionRange(start, end);
});

document.querySelector("form").addEventListener("submit", function (e) {


var emailInput = document.getElementById("email");
var emailFormat = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailInput.value.match(emailFormat)) {
alert("Invalid email format");
e.preventDefault();
}
else{
e.preventDefault();

if (confirm("Are you sure you want to submit the Feedback Form?")) {


alert("Feedback Form Submitted Successfully!");
location.reload();

}
}
});

INDIVIDUAL WONDER PAGE HTML CODE-


1)GREAT WALL OF CHINA-

<!DOCTYPE html>
<html>
<head>
<title>Great Wall of China</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Great Wall of China</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
The Great Wall of China is an ancient series of walls and
fortifications, totaling more than 13,000 miles in length, located
in northern China. It is perhaps the most recognizable symbol of
China and its long and vivid history.
</p>

<h2>History</h2>
<p>
The history of the Great Wall of China began when fortifications
built by various states during the Spring and Autumn (771–476 BC)
and Warring States periods (475–221 BC) were connected by the
first
emperor of China, Qin Shi Huang, to protect his newly founded Qin
dynasty (221–206 BC) against incursions by nomads from Inner Asia.
The walls were built of rammed earth, constructed using forced
labor, and by 212 BC ran from Gansu to the coast of southern
Manchuria. Later dynasties adopted different policies towards
northern frontier defense.
</p>
<h2>Architecture</h2>
<p>
The Great Wall is a series of fortifications that were built
across
the historical northern borders of ancient Chinese states and
Imperial China as protection against various nomadic groups from
the
Eurasian Steppe. Apart from defense, other purposes of the Great
Wall have included border controls, allowing the imposition of
duties on goods transported along the Silk Road, regulation or
encouragement of trade and the control of immigration and
emigration. Furthermore, the defensive characteristics of the
Great
Wall were enhanced by the construction of watchtowers, troop
barracks, garrison stations, signaling capabilities through the
means of smoke or fire, and the fact that the path of the Great
Wall
also served as a transportation corridor.
</p>
<h2>Restoration and Preservation</h2>
<p>
The Great Wall of China fell into decay following the Ming
Dynasty,
when the Qing Dynasty (1644-1912 CE) took power and expanded the
border of China northwards, making the wall obsolete. Restoration
and preservation efforts only seriously began in the 1980s CE, and
the wall was declared a UNESCO World Heritage Site in 1987 CE. The
Chinese government began restoring the Great Wall of China in 1957
with the Badaling Section of the wall. Subsequently, more sections
of the wall were restored, and more are still being restored. The
restoration process is still ongoing and could take more years.
The
project is based on an archaeological assessment of the Great
Wall’s
architectural, structural and technological uniqueness, its
erosion
and gradual disintegration, and the environment in which it was
built.
</p>
<h2>Impact on Culture and Media</h2>
<p>
The Great Wall of China has had a significant part in Chinese
culture and identity in addition to its military importance. Many
legends, myths, and stories have been centered on the wall, which
have influenced Chinese culture and reaffirmed a sense of national
pride. Walls and limited entrances are an ancient and modern part
of
Chinese culture. They not only shape streets and transportation
but
are a reflection of China’s society. Chinese walls represent
national sovereignty, defense, civilization, and stability. They
could also be said to represent isolationism, control, or fear.
Nowadays the Great Wall exemplifies a culture of preserving
cultural
heritage, and greater openness to the outside world, with the
Great
Wall becoming China’s greatest tourist attraction. Great Wall
paintings, embroidery, décor, photography, and postcards are a
modern Chinese art form.
</p>
<h2>Significance</h2>
<p>
The Great Wall was important in defending China from northern
invasion for centuries, and has become a national symbol, and
China’s top tourist sight4. It provides significant physical
evidence of the far-sighted political strategic thinking and
mighty
military and national defense forces of central empires in ancient
China.
</p>
<h2>Tourism</h2>
<p>
The Great Wall is famous all over the world and attracts millions
of
tourists every year. It attracts tourists for its historical and
archaeological value, as well as the majestic scenery seen from
the
Wall. The best 10 sections to visit are around Beijing’s north and
east: Mutianyu, Jinshanling, Jiankou, Simatai, Huanghuacheng,
Gubeikou, Juyongguan, Huangyaguan, Shanhaiguan, and Badaling.
</p>
<h2>Final Thoughts</h2>
<p>
The Great Wall of China, a remarkable feat of ancient defensive
architecture, has stood the test of time. Its rich history and
architectural grandeur speak volumes about the ingenuity and
resilience of the Chinese people. The wall not only served as a
physical barrier against invasions but also played a significant
role in shaping the cultural and political landscape of China. The
ongoing restoration and preservation efforts highlight the
importance of safeguarding this historical monument for future
generations. The Great Wall’s impact on culture and media
underscores its influence beyond its physical presence, permeating
various aspects of life and creativity. Today, as one of the
world’s
most visited tourist attractions, the Great Wall continues to awe
and inspire with its majestic presence and the stories it
embodies.
It stands as a symbol of China’s past, a testament to human
determination and ingenuity, and a beacon that draws people from
around the world to experience a part of history. In conclusion,
the
Great Wall of China is not just a wall but a monument that
encapsulates the spirit of an era gone by and continues to be
relevant in the present day. It is a testament to our human
capacity
for creativity, endurance, and reverence for history.
</p>
</div>
<div class="image-content">
<figure>
<h2>Great Wall Of China Photos</h2>
<div class="pictile">
<img src="greatwall1.jpg" alt="The Great Wall" />
<figcaption>The Great Wall</figcaption>
</div>
<div class="pictile">
<img
src="greatwall2.jpg"
alt="Fog along Great Wall China, Jinshanling"
/>
<figcaption>Fog along Great Wall China, Jinshanling</figcaption>
</div>
<div class="pictile">
<img src="greatwall3.jpg" alt="Snow on the Great Wall" />
<figcaption>Snow on the Great Wall</figcaption>
</div>
<div class="pictile">
<img src="greatwall4.jpg" alt="Sunset at Great Wall" />
<figcaption>Sunset at Great Wall</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> Move To The
Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>

2) TAJ MAHAL-

<!DOCTYPE html>
<html>
<head>
<title>Taj Mahal</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Taj Mahal</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
The Taj Mahal, a symbol of love and an architectural marvel,
stands
majestically on the banks of the Yamuna River in Agra, India. It
is
a testament to the rich history and artistic excellence of the
Mughal era. Commissioned by Emperor Shah Jahan in memory of his
beloved wife Mumtaz Mahal, the Taj Mahal is more than just a
mausoleum, it’s a poem in marble. The sheer beauty and grandeur of
the Taj Mahal make it one of the most beloved monuments in the
world, and a must-visit destination for many.
</p>

<h2>History</h2>
<p>
The Taj Mahal’s history is a testament to the grandeur of the
Mughal
era. It’s a story of love and loss, of an emperor’s deep affection
for his wife, and his desire to immortalize her memory in the form
of this magnificent monument. The construction of the Taj Mahal
was
a mammoth task, involving thousands of artisans and craftsmen, and
materials from all over India and Asia. It stands as a symbol of
the
architectural prowess and aesthetic sensibility of the time. The
Taj
Mahal’s history is not just about its creation, but also about its
preservation. Over the centuries, it has withstood the test of
time,
surviving wars, invasions, and natural disasters, and continues to
stand tall as a beacon of India’s rich historical heritage.
</p>
<h2>Architecture</h2>
<p>
The Taj Mahal is a marvel of symmetry, geometry, and balance, with
every element of its design harmoniously integrated into a unified
whole. The intricate carvings, the extensive use of precious and
semi-precious stones, and the delicate inlay work all contribute
to
its aesthetic appeal. The Taj Mahal’s architectural beauty is a
seamless blend of Persian, Islamic, and Indian architectural
styles.
Its iconic dome, minarets, arches, and the intricate lattice work
are all testament to the skill and craftsmanship of the artisans
of
the time. The Taj Mahal is not just an architectural masterpiece,
but also a symbol of the zenith of Mughal architecture.
</p>
<h2>Restoration and Preservation</h2>
<p>
The preservation of the Taj Mahal is a testament to India’s
commitment to its rich cultural heritage. Over the years, various
measures have been taken to protect and preserve this iconic
monument. These include controlling the air pollution around the
monument, undertaking regular cleaning and maintenance work, and
regulating tourist visits to prevent wear and tear. The
Archaeological Survey of India, the body responsible for the
preservation of Indian monuments, has been instrumental in these
efforts. The preservation of the Taj Mahal is not just about
maintaining a monument, but about preserving a symbol of India’s
history and identity for future generations.
</p>
<h2>Impact on Culture and Media</h2>
<p>
The Taj Mahal has left an indelible mark on culture and media,
both
in India and around the world. It has inspired countless works of
literature, art, cinema, and music, reflecting its enduring
appeal.
The Taj Mahal’s iconic status has also made it a popular backdrop
for media events and a favorite subject for photographers. Its
image
is instantly recognizable and often used in media to represent
India. The Taj Mahal’s impact on culture and media underscores its
influence beyond its physical presence, permeating various aspects
of life and creativity.
</p>
<h2>Significance</h2>
<p>
The Taj Mahal is not just a monument, it’s a symbol of India’s
rich
cultural heritage and architectural prowess. It stands as a
testament to the power of love, and the grandeur of the Mughal
era.
The Taj Mahal’s significance extends beyond its physical presence,
it has become an integral part of India’s identity on the global
stage. It serves as a reminder of our shared human history, our
capacity for profound emotion, and the lengths we will go to honor
and remember it.
</p>
<h2>Tourism</h2>
<p>
The Taj Mahal is not just a destination, but a journey into
history
and emotion. Every year, millions of tourists walk through its
gates
to not only admire its beauty but also to experience the love
story
that it represents. The Taj Mahal is not just a visit, but an
exploration of art, history, culture, and emotion. It’s a place
where every corner tells a story, every stone sings a silent song
of
love and every visitor leaves with a piece of its timeless beauty
etched in their hearts.
</p>
<h2>Final Thoughts</h2>
<p>
The Taj Mahal stands as a testament to love, dedication, and
purity.
It is not just a monument but an embodiment of human capacity for
creativity, endurance, and reverence for history. Its impact
extends
beyond its physical presence into various aspects of life and
creativity. Today, it continues to awe and inspire with its
majestic
presence and the stories it embodies. It encapsulates the spirit
of
an era gone by and continues to be relevant in the present day.
</p>
</div>
<div class="image-content">
<figure>
<h2>Taj Mahal Photos</h2>
<div class="pictile">
<img
src="tajmahal1.jpd.jpg"
alt="The Taj Mahal without people, early morning shot."
/>
<figcaption>
The Taj Mahal without people, early morning shot.
</figcaption>
</div>
<div class="pictile">
<img
src="tajmahal2.jpg"
alt="Taj Mahal in fog framed by arches"
/>
<figcaption>Taj Mahal in fog framed by arches</figcaption>
</div>
<div class="pictile">
<img src="tajmahal3.jpg" alt="Grandeur Taj Mahal" />
<figcaption>Grandeur Taj Mahal</figcaption>
</div>
<div class="pictile">
<img src="tajmahal4.jpg" alt="Gate architecture of Taj" />
<figcaption>Gate architecture of Taj</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> Move To The
Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>

3)PETRA-

<!DOCTYPE html>
<html>
<head>
<title>Petra</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Petra</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
Petra, known as the “Rose City” due to the color of the stone from
which it is carved, is a historic and archaeological city in
southern Jordan. The city was the center of an Arab kingdom in
Hellenistic and Roman times. The city was built on a terrace,
pierced from east to west by the Wadi Musa (the Valley of Moses)—
one
of the places where, according to tradition, Moses struck a rock
and
water gushed forth. Petra is also called the “Rose City” because
of
the color of the stone from which it is carved. It was famously
described as “a rose-red city half as old as time” in a poem of
1845
by John Burgon. The city is adjacent to the mountain of Jabal
Al-Madbah, in a basin surrounded by mountains forming the eastern
flank of the Arabah valley running from the Dead Sea to the Gulf
of
Aqaba.
</p>

<h2>History</h2>
<p>
Petra dates back to the fourth century B.C. and was once a great
metropolis and trading center. The city was established as a
trading
post by the Nabateans, an Arab Bedouin tribe indigenous to the
region. The Nabateans living and trading in Petra soon accumulated
significant wealth. However, by the beginning of the eighth
century
A.D., Petra was largely abandoned and no longer a significant
location commercially, politically, or culturally.
</p>
<h2>Architecture</h2>
<p>
The architecture of Petra is a blend of Hellenistic architectural
facades with traditional Nabataean rock-cut temple/tombs. This
fusion is evident in structures such as the Khasneh, the Urn Tomb,
the Palace Tomb, the Corinthian Tomb, and the Deir (“monastery”).
These structures represent a unique artistic achievement and an
outstanding architectural ensemble of the first centuries BC to
AD.
The most recognizable structure in Petra is the tomb called the
“Khazneh” in Arabic, or “Treasury” in English. This structure
shows
the indelible influence of classic Greek architecture. Its
stunning
Corinthian-styled columns create a dramatic entrance to the tomb.
The Nabataeans decorated their structures with elaborate carvings
and statues. They worshipped Arabic gods and goddesses during
pre-Islamic times and also deified several of their kings, all of
whom are among the figures carved into the rocks at the ancient
site.
</p>
<h2>Restoration and Preservation</h2>
<p>
Efforts have been made to preserve and restore Petra. UNESCO and
the
Italian Government have collaborated on several projects for
Petra’s
preservation. These include improving the safety of the site,
enhancing structural stability and preservation of key monuments,
empowering local communities through their direct involvement in
the
conservation effort, and bettering visitor experience through new
visitor trails and information panels.
</p>
<h2>Impact on Culture and Media</h2>
<p>
Petra has had a significant impact on culture. As traders from
around the world passed through Petra, they brought new ideas and
culture from places like Egypt, China, and Greece. Petra became
more
than a center of trade—it was also a cultural center of the
ancient
world. The city’s unique architecture and the specific innovation
made by the Nabatean Bedouins that established the city have been
noted by historians and archaeologists. Given the rugged,
mountainous terrain that surrounds it, Petra wouldn’t seem like a
logical place to build a city. However, the Nabateans took
advantage
of this geography as they erected its key structures. In terms of
its impact on media, Petra has been featured in numerous films and
documentaries due to its unique and stunning architecture. Its
most
famous structure, Al Khazneh (The Treasury), was featured in the
popular film “Indiana Jones and the Last Crusade”. This has
significantly increased global awareness of Petra’s cultural and
historical significance. The city continues to inspire and
captivate
artists, historians, and tourists alike with its rich history and
breathtaking landscapes.
</p>
<h2>Significance</h2>
<p>
Petra holds immense historical, cultural, and architectural
significance. It is considered significant by historians and
archaeologists alike because of its beautiful rock-cut
architecture
and innovative water management system. The latter made the region
inhabitable, given that it is surrounded by desert and rugged,
mountainous terrain. The site is also significant due to its vast
extent of elaborate tomb and temple architecture; religious high
places; the remnant channels, tunnels, and diversion dams that
combined with a vast network of cisterns and reservoirs which
controlled and conserved seasonal rains.
</p>
<h2>Tourism</h2>
<p>
Petra is a symbol of Jordan and is Jordan’s most-visited tourist
attraction. Tourist numbers peaked at 1.1 million in 2019. Today,
Petra is a National Park and exploring it can take a few days.
</p>
<h2>Final Thoughts</h2>
<p>
Petra is not just an archaeological site; it’s a testament to
human
ingenuity and resilience. Its unique architecture carved from
stone
stands as a monument to an ancient civilization’s ability to adapt
to its environment. Despite challenges such as erosion and tourism
pressure, efforts are being made to preserve this world heritage
site for future generations. Whether you’re drawn to its
historical
significance or its architectural marvels, Petra offers an
unforgettable journey into our shared human past.
</p>
</div>
<div class="image-content">
<figure>
<h2>Petra Photos</h2>
<div class="pictile">
<img
src="petra1.jpg"
alt="Ad Deir - The Monastery, Petra, Jordan."
/>
<figcaption>Ad Deir - The Monastery, Petra, Jordan.</figcaption>
</div>
<div class="pictile">
<img
src="greatwall2.jpg"
alt="Camels and tourists at The Treasury (Al Khazneh) of
Petra"
/>
<figcaption>
Camels and tourists at the Treasury of Petra
</figcaption>
</div>
<div class="pictile">
<img src="petra3.jpg" alt="The Siq, Petra" />
<figcaption>The Siq, Petra</figcaption>
</div>
<div class="pictile">
<img src="petra4.jpg" alt="The Royal Tombs in Petra" />
<figcaption>The Royal Tombs in Petra</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> Move To The
Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>
4)THE CHICHEN ITZA-

<!DOCTYPE html>
<html>
<head>
<title>Great Wall of China</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Great Wall of China</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
Chichen Itza is one of the New Seven Wonders of the World. Located
in Yucatan, it is now a complex of Mayan ruins that became an
important archaeological site in the 1800s. It attracts millions
of
tourists every year, making it one of the most visited
archaeological sites in Mexico.
</p>

<h2>History</h2>
<p>
Chichen Itza was a significant center of political and economic
activity in the Mayan culture by roughly 600 A.D. By then, it was
already one of the largest cities in the Mayan world, covering
nearly two square miles with densely packed commercial,
residential
and other structures made of stone. Chichen Itza even had its own
“suburbs,” with smaller homes occupying the outskirts of the city.
Remarkably, given the relatively simple technology available at
the
time, Chichen Itza was built in an area of rough terrain that was
leveled in order to accommodate larger structures.
</p>
<h2>Architecture</h2>
<p>
Chichen Itza exhibits a multitude of architectural styles,
reminiscent of styles seen in central Mexico and of the Puuc and
Chenes styles of the Northern Maya lowlands. The main early
buildings are in an architectural style known as Puuc. In the Puuc
style, buildings were made of limestone. The outside walls often
had
plain surfaces on the bottom half. On the top half were carvings
of
geometric patterns and representations of the rain god Chac.
Archaeologists believe that a “sacred geography” led the Maya to
design Chichen Itza. There appears to be a correlation throughout
Mesoamerica between the landscape beneath the earth’s surface and
the Maya constructions above it.
</p>
<h2>Restoration and Preservation</h2>
<p>
In 1923, the Mexican government awarded the Carnegie Institution a
10-year permit (later extended another 10 years) to allow U.S.
archaeologists to conduct extensive excavation and restoration of
Chichen Itza. Carnegie researchers excavated and restored the
Temple
of Warriors and the Caracol, among other major buildings. At the
same time, the Mexican government excavated and restored El
Castillo
(Temple of Kukulcan) and the Great Ball Court. Since those early
efforts, Mexico’s National Institute of Anthropology and History
spearheads all efforts to preserve El Castillo and all of Chichen
Itza’s stunning remains, which have been designated as a UNESCO
World Heritage site. However, the fact that El Castillo and
Chichen
Itza were restored so well may now be hurting them.
</p>
<h2>Impact on Culture and Media</h2>
<p>
Chichen Itza’s cultural significance extends beyond its historical
value. It serves as a symbol of Mayan heritage, drawing visitors
from around the world to explore and appreciate the achievements
of
this ancient civilization. The site acts as a focal point for
cultural exchange and educational experiences, fostering a deeper
understanding of the complexities and contributions of the Mayan
people. Chichen Itza offers a platform for promoting understanding
and appreciation of the Mayan civilization. Through guided tours,
educational programs, and cultural events, visitors can learn
about
the cultural, scientific, and artistic achievements of the Maya,
gaining a greater appreciation for their ingenuity and enduring
legacy. In media, Chichen Itza has been featured in numerous
documentaries, films, and television series, further enhancing its
global recognition and cultural impact. Its iconic structures have
become synonymous with Mayan civilization, contributing to a
broader
understanding and appreciation of this ancient culture.
</p>
<h2>Significance</h2>
<p>
Chichen Itza holds profound cultural significance as it unveils
the
mysteries of the Mayan civilization. From its architectural
wonders
to its religious rituals and social structure, Chichen Itza
provides
a window into the rich and complex heritage of the Maya.
</p>
<h2>Tourism</h2>
<p>
As for tourism, Chichen Itza is an important tourist attraction
and
remains an active archaeological site. It roughly attracts 1.4
million visitors per year. This is partially due to the
recognition
from UNESCO in 1988, which added Chichen Itza to the list of World
Heritage Sites. Furthermore, Chichen Itza’s proximity to states
like
Cancun and Cozumel, known for their beaches, also contributes to
its
popularity.
</p>
<h2>Final Thoughts</h2>
<p>
Chichen Itza, with its rich history, architectural marvels, and
cultural significance, stands as a testament to the ingenuity and
resilience of the Mayan civilization. It serves as a bridge
between
the past and the present, offering a glimpse into an ancient world
that continues to captivate and inspire. As one of the most
visited
archaeological sites in Mexico, Chichen Itza plays a crucial role
in
promoting cultural understanding and appreciation. Its
preservation
and restoration efforts ensure that future generations can
continue
to learn from and be inspired by this remarkable site. In
conclusion, Chichen Itza is more than just an archaeological site;
it’s a symbol of human achievement, a source of national pride,
and
a beacon of cultural heritage. Its enduring legacy continues to
resonate, reminding us of the extraordinary capabilities of human
civilization.
</p>
</div>
<div class="image-content">
<figure>
<h2>Great Wall Of China Photos</h2>
<div class="pictile">
<img
src="chichenitza1.jpg"
alt="El Castillo, Chichen Itza, Yucatan, Mexico"
/>
<figcaption>
El Castillo, Chichen Itza, Yucatan, Mexico
</figcaption>
</div>
<div class="pictile">
<img
src="chichenitza2.jpg"
alt="Mayan ball court at Chichen Itza"
/>
<figcaption>Mayan ball court at Chichen Itza</figcaption>
</div>
<div class="pictile">
<img
src="chichenitza3.jpg"
alt="Temples Of THe Warriors, Chichen-Itza, Mexico"
/>
<figcaption>
Temples Of THe Warriors, Chichen-Itza, Mexico
</figcaption>
</div>
<div class="pictile">
<img
src="chichenitza4.jpg"
alt="Stone relief carvings at the Mayan ruins of Chichen Itza"
/>
<figcaption>
Stone relief carvings at the Mayan ruins of Chichen Itza
</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> Move To The
Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>

5)THE COLOSSEUM-

<!DOCTYPE html>
<html>
<head>
<title>The Roman Colosseum (Colosseum)</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>The Roman Colosseum (Colosseum)</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
The Roman Colosseum, also known as the Flavian Amphitheatre, is a
large amphitheater in Rome. It was built during the reign of the
Flavian emperors as a gift to the Roman people. Construction began
around 70–72 AD under Emperor Vespasian and was completed in 80
AD.
Unlike many earlier amphitheaters, which had been dug into
hillsides
to provide adequate support, the Colosseum was a freestanding
structure made of stone and concrete.
</p>

<h2>History</h2>
<p>
The Colosseum, also known as the Flavian Amphitheater, was built
between 70 AD and 80 AD under the rule of Emperors Vespasian,
Titus,
and Domitian. It was constructed with the manpower of tens of
thousands of slaves. The amphitheater was used for more than four
centuries before it ceased to function as a sporting arena. During
medieval times, the Colosseum was used as a church and then as a
fortress by two prominent Roman families, the Frangipane and the
Annibaldi. The Colosseum was damaged by lightning and earthquakes
and, even more severely, by vandalism and pollution.
</p>
<h2>Architecture</h2>
<p>
The Colosseum, one of the greatest feats of Roman architecture, is
the largest Roman amphitheater in the world. It was built from an
estimated 100,000 cubic meters of travertine stone, plus a similar
measure of Roman cement, bricks, and tuff blocks. The Colosseum
was
conceived as a testament to Rome’s might. At the time of its
completion, it was the most complex man-made structure in the
world
and one of the largest. The travertine stone used as the primary
material in its construction was white, and at nearly 50 meters in
height (at a time when most buildings were single-story) and with
a
footprint of 6 acres it would have gleamed in the sun and inspired
awe in anyone who laid eyes upon it.
</p>
<h2>Restoration and Preservation</h2>
<p>
Preservation of the Colosseum began in earnest in the 19th
century,
with notable efforts led by Pius VIII. A restoration project was
undertaken in the 1990s. The Italian government has allocated
$18.5
million to rebuild the wood-and-sand floor of the ancient
structure,
which was removed in the 19th century. In a famous prophecy, a
medieval monk known as Venerable Bede wrote that “Rome will exist
as
long as the Colosseum does; when the Colosseum falls so will Rome;
when Rome falls so will the world.” This prophecy has motivated
many
of the preservation efforts.
</p>
<h2>Impact on Culture and Media</h2>
<p>
The Colosseum has had a significant influence on modern
architecture. Its arches and vaults have been particularly
influential, with many modern buildings incorporating similar
features. The Colosseum’s overall design has also been an
inspiration for numerous architects. It has been featured in
certain
movies such as Gladiator or Spartacus. The Colosseum was in a way
a
model for all of the sports stadiums and arenas we have today in
all
different parts of the world. In today’s culture it is, quite
simply, an Italian icon and remains a symbol of the great Roman
Empire.
</p>
<h2>Significance</h2>
<p>
The Colosseum, also known as the Flavian Amphitheater, is a symbol
of the grandeur of the Roman Empire1. It was a place of amusement
for some, and for others, it was a place of death2. The blood-
soaked
arena provided Romans with a much-needed distraction from their
difficult lives2. Often placed on the level of the architectural
genius of the pyramids, the Colosseum is the most spectacular
symbol
of ancient Rome2. The function of the Colosseum later changed to a
grazing ground, a fortress for an Italian baron, and later as a
theatre for Passion plays when it was taken over by the church. It
was used as a symbol of the triumph of Christianity over pagan
traditions and preserved because of the martyrs that died inside.
</p>
<h2>Tourism</h2>
<p>
The Colosseum is one of the most popular tourist attractions in
the
world. It is a must-see sight if you’re visiting Italy’s capital,
Rome. The Colosseum is Rome’s most popular landmark to visit.
Lines
to enter can be enormous and the last thing you want to do is
spend
your valuable time waiting in line. Fortunately, with proper
planning, you can avoid this long wait and have a great experience
at the Colosseum. With over four million visitors a year, the
Colosseum is the most popular tourist attraction in Italy, and one
of the most popular in the world.
</p>
<h2>Final Thoughts</h2>
<p>
The Colosseum, an iconic symbol of the Roman Empire, is a
testament
to the architectural prowess and cultural richness of ancient
Rome.
Despite the ravages of time and natural disasters, it stands as a
reminder of a civilization that once was. Today, it serves as a
bridge between the past and the present, offering visitors a
glimpse
into the grandeur of the Roman Empire. Visiting the Colosseum is
an
absolute must-do in Rome and one of the most impressive encounters
you will ever find of the ancient world. It’s not just a monument,
but a narrative of history, echoing with the clamor of ancient
spectators and the clash of gladiatorial combat. The Colosseum
continues to inspire awe and curiosity, making it an enduring
symbol
of Rome’s past.
</p>
</div>
<div class="image-content">
<figure>
<h2>The Roman Colosseum Photos</h2>
<div class="pictile">
<img
src="colosseum1.jpg"
alt="Sunrise at Colosseum, Rome, Italy"
/>
<figcaption>Sunrise at Colosseum, Rome, Italy</figcaption>
</div>
<div class="pictile">
<img src="colosseum2.jpg" alt="Roman colosseum panorama" />
<figcaption>Roman colosseum panorama</figcaption>
</div>
<div class="pictile">
<img
src="colosseum3.jpg"
alt="Arch of Constantine with the Colosseum in the background"
/>
<figcaption>
Arch of Constantine with the Colosseum in the background
</figcaption>
</div>
<div class="pictile">
<img src="colosseum4.jpg" alt="Colosseum at sunset" />
<figcaption>Colosseum at sunset</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> &nbsp; Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> &nbsp; Move To
The Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>
6)MACHU- PICCHU-

<!DOCTYPE html>
<html>
<head>
<title>Machu Picchu</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Machu Picchu</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
Machu Picchu is a 15th-century Inca citadel located in the Eastern
Cordillera of southern Peru on a 2,430-meter (7,970 ft) mountain
ridge. Often referred to as the “Lost City of the Incas”, it is
the
most familiar icon of the Inca Empire. It was probably the most
amazing urban creation of the Inca Empire at its height. The site
was probably called Huayna Picchu by the Inca people themselves.
The
Incas built the estate around 1450 but abandoned it a century
later,
at the time of the Spanish conquest. Machu Picchu was declared a
Peruvian Historic Sanctuary in 1982 and a UNESCO World Heritage
Site
in 1983.
</p>

<h2>History</h2>
<p>
Machu Picchu was constructed around 1450 AD, during the height of
the Inca Empire. It was inhabited for approximately 100 years
before
being abandoned around the time of the Spanish conquest of the
Inca
Empire. Despite its abandonment, the Spanish conquistadors never
discovered Machu Picchu, so it was spared the destruction that
befell other Inca sites. Over centuries, the surrounding jungle
grew
over much of the site, and few knew of its existence. It wasn’t
until 1911 that American historian Hiram Bingham brought Machu
Picchu to international attention.
</p>
<h2>Architecture</h2>
<p>
Machu Picchu is a marvel of ancient architecture. Its structures
are
built in the classical Inca style, with polished dry-stone walls.
This technique, known as Ashlar, involves cutting the stones to
fit
together tightly without mortar. Remarkably, the Incas were master
stonemasons who made this technique so precise that even a credit
card cannot be inserted between the stones. The site itself is
expansive, stretching over 5 miles and featuring more than 3,000
stone steps linking its various levels.
</p>
<h2>Restoration and Preservation</h2>
<p>
Restoration and preservation of Machu Picchu are ongoing efforts
carried out by the National Institute of Culture (INC) and various
specialists. These works have extended to Huayna Picchu, the
higher
mountain in every postcard of the citadel. The goal is to maintain
the integrity of this historical site while making it accessible
for
tourists. The restoration process is careful and meticulous,
ensuring that the original structures are not damaged. Despite
these
efforts, preservation remains a challenge due to environmental
factors and the impact of tourism.
</p>
<h2>Impact on Culture and Media</h2>
<p>
Machu Picchu's impact on culture and media is significant. As a
symbol of the Inca civilization, it has become an icon of
indigenous
cultural heritage in South America. It has inspired countless
works
of art, literature, and academic studies. In recent years, social
media has played a central role in increasing the global
visibility
of Machu Picchu. Platforms like Instagram have been flooded with
images of the site, with the hashtag #machupicchu being used by
approximately 1.5 million users as of August 2019. However, this
increased visibility has also led to concerns about overcrowding
and
its impact on the site's preservation.
</p>
<h2>Significance</h2>
<p>
The significance of Machu Picchu is manifold. As a UNESCO World
Heritage Site, it is recognized for its cultural and historical
value. The site offers a unique window into the Inca civilization,
showcasing their advanced architectural and engineering skills.
The
precision of the stone work, the complexity of the site's design,
and its integration with the natural environment all speak to the
Inca's sophisticated understanding of their surroundings.
Furthermore, Machu Picchu serves as a symbol of indigenous
cultural
heritage in South America. Its preservation allows future
generations to connect with this past. Lastly, it has become an
important driver of tourism in Peru, contributing to the local and
national economy.
</p>
<h2>Tourism</h2>
<p>
Tourism at Machu Picchu is a major industry. The site attracts
approximately 1.5 million visitors annually, making it one of
Peru's
most popular tourist attractions. Visitors are drawn by the site's
historical significance, architectural marvels, and stunning
natural
surroundings. However, the high volume of tourists has raised
concerns about the impact on the site's preservation. To address
this, authorities have implemented measures such as limiting daily
visitor numbers and requiring visitors to be accompanied by a
guide.
Despite these challenges, tourism at Machu Picchu continues to
thrive, contributing significantly to the local and national
economy.
</p>
<h2>Final Thoughts</h2>
<p>
Machu Picchu is a testament to the architectural prowess and
advanced civilization of the Incas. Its well-preserved structures
continue to draw millions of tourists each year, making it one of
Peru's most significant tourist attractions. Despite its
popularity,
many mysteries about Machu Picchu remain unresolved, adding to its
allure and fascination. As we continue to explore and understand
this remarkable site, it's crucial that we balance tourism with
preservation efforts. This way, Machu Picchu can continue to awe
and
inspire future generations with its historical significance and
natural beauty.
</p>
</div>
<div class="image-content">
<figure>
<h2>Machu Picchu Photos</h2>
<div class="pictile">
<img
src="machupicchu1.jpg"
alt="Machu Picchu at Sunrise and Clouds"
/>
<figcaption>Machu Picchu at Sunrise and Clouds</figcaption>
</div>
<div class="pictile">
<img
src="machupicchu2.jpg"
alt="Machu Picchu view from the Sun Gate"
/>
<figcaption>Machu Picchu view from the Sun Gate</figcaption>
</div>
<div class="pictile">
<img src="machupicchu3.jpg" alt="Inca bridge to Machu Picchu "
/>
<figcaption>Inca bridge to Machu Picchu</figcaption>
</div>
<div class="pictile">
<img
src="machupicchu4.jpg"
alt="Three windows temple at Machu Picchu"
/>
<figcaption>Three windows temple at Machu Picchu</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> &nbsp; Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> &nbsp; Move To
The Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>

7)CHRIST THE REDEEMER-

<!DOCTYPE html>
<html>
<head>
<title>Christ the Redeemer (Statue of Christ the Redeemer)</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"
/>
<link rel="stylesheet" href="stylecontent.css" />
</head>
<body>
<header id="topmost">
<h1>Christ the Redeemer (Statue of Christ the Redeemer)</h1>
</header>

<main id="top">
<div class="content">
<div class="text-content">
<h2>Introduction</h2>
<p>
Christ the Redeemer, or “Cristo Redentor” in Portuguese, is a
colossal statue of Jesus Christ located at the summit of Mount
Corcovado in Rio de Janeiro, Brazil. This iconic landmark,
standing
98 feet (30 meters) tall, was completed in 1931. The statue is the
largest Art Deco-style sculpture in the world and is recognized
globally as a symbol of Christianity. It was designed by French
sculptor Paul Landowski and built by Brazilian engineer Heitor da
Silva Costa, in collaboration with French engineer Albert Caquot.
The face was sculpted by Romanian sculptor Gheorghe Leonida.
</p>

<h2>History</h2>
<p>
The idea of building a large statue atop Mount Corcovado in Rio de
Janeiro, Brazil, was first suggested in the 1850s, but it wasn't
until the 1920s that the plan came to fruition. The statue of
Christ
the Redeemer was constructed between 1922 and 1931. It was created
by French sculptor Paul Landowski and built by Brazilian engineer
Heitor da Silva Costa, in collaboration with French engineer
Albert
Caquot. The statue has been struck by lightning and undergone
several renovations. Today, it is a Brazilian cultural icon and a
global symbol of Christianity.
</p>
<h2>Architecture</h2>
<p>
The architecture of Christ the Redeemer is a marvel of the Art
Deco
style. The statue stands 30 meters high, not including its 8-meter
pedestal, and its arms stretch 28 meters wide. It was designed by
French sculptor Paul Landowski and built by Brazilian engineer
Heitor da Silva Costa, in collaboration with French engineer
Albert
Caquot. The statue is made of reinforced concrete and outer layers
of soapstone, chosen for its enduring qualities and ease of use.
The
construction of the statue was a feat of engineering, particularly
given its location atop the steep Mount Corcovado. Despite the
challenges, the monument stands as a testament to human ingenuity
and resilience.
</p>
<h2>Restoration and Preservation</h2>
<p>
Restoration and preservation of Christ the Redeemer are ongoing
efforts. The monument underwent a significant restoration in 2021,
ahead of its 90th birthday. This involved a thorough cleaning,
protection against corrosion, and the installation of new
lighting.
A mechanical access system was also introduced to facilitate
future
maintenance. Despite these efforts, preservation remains a
challenge
due to environmental factors such as weathering and lightning
strikes. The site's popularity as a tourist destination also
necessitates regular maintenance to ensure its continued
preservation for future generations.
</p>
<h2>Impact on Culture and Media</h2>
<p>
Christ the Redeemer has had a profound impact on both culture and
media. As one of the most recognizable landmarks in Brazil, it has
become an icon of Rio de Janeiro and Brazilian national pride. Its
image is frequently used in promotional materials for the city and
country. In 2007, it was named one of the New Seven Wonders of the
World, further cementing its global recognition. The statue has
also
featured prominently in films, television shows, music videos, and
social media posts. Its cultural significance extends beyond
Brazil,
as it is also recognized worldwide as a symbol of Christianity.
</p>
<h2>Significance</h2>
<p>
Christ the Redeemer holds immense significance both culturally and
religiously. As an icon of Brazil, it represents national identity
and pride. Its location atop Mount Corcovado offers panoramic
views
of Rio de Janeiro, symbolizing a watchful presence over the city.
As
one of the New Seven Wonders of the World, it holds global
significance as an architectural marvel. From a religious
perspective, it serves as a symbol of Christianity, with its
welcoming posture reflecting the openness of Christ's love.
Furthermore, it stands as a testament to human ingenuity and
resilience, having been constructed in a challenging location
nearly
a century ago.
</p>
<h2>Tourism</h2>
<p>
Tourism at Christ the Redeemer is a major industry. As one of
Brazil's most popular tourist attractions, it draws approximately
2.5 million visitors each year. Tourists are drawn not only by the
statue itself but also by the panoramic views of Rio de Janeiro
from
Mount Corcovado. Visiting Christ the Redeemer often tops the list
of
must-do activities for travelers to Brazil. However, this
popularity
has led to concerns about overcrowding and its impact on both the
site's preservation and visitor experience. To manage this,
authorities have implemented measures such as limiting daily
visitor
numbers and requiring visitors to be accompanied by a guide.
</p>
<h2>Final Thoughts</h2>
<p>
Christ the Redeemer stands as an iconic symbol not just for Brazil
but for Christianity around the world. Its grandeur and location
offer a unique blend of religious reverence and architectural
marvel. Despite being nearly a century old, it continues to
captivate millions with its imposing presence and panoramic views
of
Rio de Janeiro. As we continue to explore and understand this
remarkable site, it's crucial that we balance tourism with
preservation efforts. This way, Christ the Redeemer can continue
to
awe and inspire future generations with its historical
significance
and natural beauty.
</p>
</div>
<div class="image-content">
<figure>
<h2>Christ the Redeemer Photos</h2>
<div class="pictile">
<img
src="christ1.jpg"
alt="Christ the Redeemer in Rio de Janeiro"
/>
<figcaption>Christ the Redeemer in Rio de Janeiro</figcaption>
</div>
<div class="pictile">
<img src="christ2.jpg" alt="Corcovado in Rio de Janeiro" />
<figcaption>Corcovado in Rio de Janeiro</figcaption>
</div>
<div class="pictile">
<img
src="christ3.jpg"
alt="Aerial view from helicopter to Christ the Redeemer statue
on mountain"
/>
<figcaption>
Aerial view from helicopter to Christ the Redeemer statue on
mountain
</figcaption>
</div>
<div class="pictile">
<img src="christ4.jpg" alt="View of Rio de Janeiro at dusk" />
<figcaption>View of Rio de Janeiro at dusk</figcaption>
</div>
</figure>
</div>
</div>
</main>

<footer>
<div class="footer-content">
<div class="footer-inside">
<a href="homepage.html" class="links"
><i class="fas fa-arrow-left"></i> &nbsp; Back To The Homepage</a
>
<div class="company-detail">
<img src="logo.jpg" alt="Logo" />
<p>Seven Wonders- discovering the extraordinary</p>
</div>

<a href="#topmost" class="links-right"


><i class="fa fa-arrow-up" aria-hidden="true"></i> &nbsp; Move To
The Top</a
>
</div>
</div>
<hr />
<div class="footer-content">
<p class="end-content">Copyright &copy; 2024 Seven Wonders.</p>
</div>
</footer>
</body>
</html>

COMMON CSS CODE OF INDIVIDUAL WONDER PAGE-


body {
font-family: "Poppins", sans-serif;
margin: 0%;
background-color: #f8f9fa;
}

#topmost {
background-color: rgb(249, 230, 249);
padding: 20px;
margin-bottom: 15px;
}

#topmost h1 {
text-align: center;
color: purple;
}
#top {
padding: 20px;
}

#top h2 {
color: purple;
}

#top p {
font-size: 18px;
margin-bottom: 10px;
}

img {
display: block;
width: 85%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.pictile {
transition: all 0.3s ease;
}

.pictile:hover {
transform: scale(1.02);
}

.content {
display: flex;
justify-content: space-between;
}

.text-content {
flex: 1;
margin-right: 20px;
}

.image-content {
flex: 1;
}

.image-content h2 {
text-align: center;
margin-bottom: 30px;
}

figure {
border: 5px solid rgba(153, 6, 153, 0.232);
padding: 10px;
margin-bottom: 20px;
background-color: rgb(249, 230, 249);
}

figcaption {
text-align: center;
font-size: 18px;
padding-top: 15px;
margin-bottom: 35px;
color: rgb(108, 107, 221);
text-decoration: underline;
}

footer {
background-color: #333;
color: #8a8a8a;
text-align: center;
padding: 20px;
font-size: 14px;
}

.footer-content {
display: flex;
flex-direction: column;
}

.footer-content img {
width: 90px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
filter: grayscale(100%);
}

.footer-content img:hover {
filter: grayscale(0%);
}

.footer-inside {
display: flex;
justify-content: space-between;
align-items: center;
}

a.links {
background-color: rgba(
58,
66,
58,
0.96
);
color: #8a8a8a;
margin-left: auto;
margin-right: auto;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3 ease, color 0.3 ease, transform 0.3s ease;
}

a.links:hover {
background-color: rgb(136, 68, 68);
color: whitesmoke;
transform: scaleX(1.1);
transform-origin: right;
}

a.links-right {
background-color: rgba(
58,
66,
58,
0.96
);
color: #8a8a8a;
margin-left: auto;
margin-right: auto;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3 ease, color 0.3 ease, transform 10s ease;
}

a.links-right:hover {
background-color: rgb(68, 136, 68);
color: whitesmoke;
transform: scaleX(1.1);
transform-origin: left;
}

.company-detail {
display: flex;
flex-direction: column;
}

.company-detail p {
margin-top: 10px;
}
.end-content {
margin-top: 0;
}

hr {
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}

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


body {
font-family: "Poppins", sans-serif;
margin: 0%;
background-color: #f8f9fa;
}

#topmost {
background-color: rgb(249, 230, 249);
padding: 20px;
margin-bottom: 15px;
}
#topmost h1 {
text-align: center;
color: purple;
font-size: 29px;
}

#top {
padding: 20px;
}

#top h2 {
color: purple;
}

#top p {
font-size: 16px;
margin-bottom: 10px;
}

img {
display: block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.pictile {
transition: all 0.3s ease;
}

.content {
display: flex;
flex-direction: column;
}

.text-content, .image-content {
margin-right: 0;
}

figure {
border: 5px solid rgba(153, 6, 153, 0.232);
padding: 10px;
margin-bottom: 20px;
background-color: rgb(249, 230, 249);
}
figcaption {
text-align: center;
font-size: 16px;
padding-top: 15px;
margin-bottom: 35px;
color: rgb(108, 107, 221);
text-decoration: underline;
}

footer {
background-color: #333;
color: #8a8a8a;
text-align: center;
padding: 20px;
font-size: 12px;
}

.footer-content {
display: flex;
flex-direction: column;
}

.footer-content img {
width: 60px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
filter: grayscale(100%);
}

.footer-inside {
display: flex;
flex-direction: column;
align-items: center;
}

.company-detail {
order: 1;
}

.links-right {
order: 2;
margin-bottom: 10px;
}

.links {
order: 3;
}

a.links, a.links-right {
background-color: rgba(58, 66, 58, 0.96);
color: #8a8a8a;
margin-left: auto;
margin-right: auto;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3 ease, color 0.3 ease, transform 0.3s
ease;
}

.company-detail {
display: flex;
flex-direction: column;
}

.company-detail p {
margin-top: 10px;
}

.end-content {
margin-top: 0;
}

hr {
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
}

You might also like